第一步、基礎環境

初始化

項目初始化

npm init -y

安裝webpack

npm i webpack

安裝react

npm i react react-dom -s

項目基礎框架

入口文件(src/index.js)

import React from 'react'import {render} from 'react-dom'import App from './App'render(<App/>,document.getElementById('root'))

主組件(src/App.js)

import React,{Component} from 'react'class App extends Component{  constructor(){    super()  }  redner(){    return(      <div>        App Module      </div>    )  }}  

webpack.config.js

const path = require('path')const StyleLintPlugin = require('stylelint-webpack-plugin')const STYLELINTENABLE = truemodule.exports = {  mode:'development',  entry:'./src/index.js',  output:{    path:path.resolve(__dirname,'build'),    filename:'bundle.js'  },  module:{    rules:[      //處理js/jsx      {        test://.jsx?/i,        use:{          loader:'bebel-loader',          options:{            presets:['@babel/preset-react']          }        }      },      //處理css      {        test://.css$/i,        use:['style-loader','css-loader',{          loader:'postcss-loader',          options:{            plugins:require('autoprefixer')          }        }]      },      //處理圖片資源      {        test://.(png|jpg|gif)$/i,        use:{          loader:'url-loader',          options:{            outputPath:'imgs/',            limit:10*1024          }        }      },      //處理字體文件      {        test://.(eot|svg|ttf|woof|woof2)$/i,        use:{          loader:'url-loader',          options:{            outputPath:'fonts/',            limit:10*1024          }        }      },      //less      {        test://.less$/i,        use:['style-loader','css-loader','less-loader']      },    ]  },  devtool:'source-map',  plugins:[    ...STYLELINTENABLE ?[      new StyleLintPlugin({        files:['**/*.css','**/*.less','**/*.js','**/*.html','**/*.vue','**/*.scss']      })    ]:[]  ]}

webpack.config.js

 "stylelint": {  "extends": "stylelint-config-standard" }, "browserslist":[  "> 0.5%",//市場占有率大于百分之零點5  "last 2 version",//最后兩個版本  "not dead"http://還沒有die ]

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。