Webpack 4.x搭建react开发环境的方法步骤

本文介绍了了Webpack 4.x搭建react开发环境的方法步骤，分享给大家，也给自己留个笔记

必要依赖一览(npm install) 安装好。

"dependencies": {  "babel-core": "^6.26.3",  "babel-loader": "^7.1.5",  "babel-preset-env": "^1.7.0",  "react": "^16.4.2",  "react-dom": "^16.4.2",  "webpack": "^4.16.5"  ...}

babel系列是干什么用的呢？是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在，所以单纯的babel是不够的，此外要让babel作用于webpack，需要给webpack添加一个loader（以前版本叫loader，4.x版本开始改用‘rules'），在工程根目录新建webpack.config.js文件，并添加如下代码：

var path = require('path');var node_modules = path.resolve(__dirname, 'node_modules');var deps = [  ];//以上代码可以忽略，没有必要不要添加noParse，因为依赖代码中可能会有环境的判断，而浏览器中是拿不到process变量的，会报错！var config = {  //这里是打包的入口 entry: path.resolve(__dirname, './react/app.js'), resolve: {  alias: {  } }, //打包完成后输出到./build/bundle.js文件中 output: {  path: path.resolve(__dirname, './build'),  filename: 'bundle.js', }, mode: 'development', module: {   //上述的规则，loader就放在这里，这段没什么好说的，从Webpack官方文档上直接拿来用  rules: [    {     test: //.js$/,     exclude: /(node_modules|bower_components)/,     use: {      loader: 'babel-loader',      options: {        //刚刚下载的module之一       presets: ['babel-preset-env']      }     }    }   ] }};//遍历你的自定义要排除的依赖，安装到node_modules里的依赖一般不需要排除掉deps.forEach(function (dep) {  var depPath = path.resolve(node_modules, dep);  config.resolve.alias[dep.split(path.sep)[0]] = depPath;  config.module.noParse.push(depPath); });module.exports = config;

以上代码可以直接用，请先将注释去掉。有了以上文件配置，你可以直接在package.json中添加scripts来打包你的app.js。

..."scripts": {  ...  "build-config": "webpack",  ...}...

执行npm run build-config可执行打包操作，但是目前为止还是会报错，因为缺少babel设置，webpack打包时无法识别jsx语法，什么时jsx语法？就是在js代码中写的类似于dom结构的东西，如下:

...<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>  {'Hello ' + this.state.text}</h1>...

要解析这个东西还需要添加.babelrc文件，在其中添加：

{  "plugins": ["transform-react-jsx"]}

这句主要是说在babel参与打包时，会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js

> webpackHash: e716d360a6a752006c09Version: webpack 4.16.5Time: 973msBuilt at: 2018-08-14 15:19:14  Asset   Size Chunks       Chunk Namesbundle.js 715 KiB  main [emitted] mainEntrypoint main = bundle.js[./react/app.js] 2.74 KiB {main} [built]  + 21 hidden modules