详解使用WebPack搭建React开发环境

npm init -y

npm i webpack

npm i react react-dom -s

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

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

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']      })    ]:[]  ]}

 "stylelint": {  "extends": "stylelint-config-standard" }, "browserslist":[  "> 0.5%",//市场占有率大于百分之零点5  "last 2 version",//最后两个版本  "not dead"//还没有die ]