Webpack4从零搭建React开发环境

实践文：参考vue-cli配置及网上react相关文章，选用webpack4从零搭建react开发环境。

github项目地址

1、npm init初始化项目

• npm -v可以查看npm版本，我安装的最新版5.5.1
• 初始化项目后将生成一个package.json文件，如图：

2、安装依赖

• 安装开发环境依赖：npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
  a> 其中babel系列支持我们使用ES6语法（具体项目可选）；
  b> webpack系列（包括各种加载器）是我们的模块打包工具，也是搭建开发环境的重要成员。
  c> webpack4需搭配webpack-cli使用
• 安装react依赖：npm install --save react react-dom react-router-dom

安装完成之后package.json中会多出两个属性：devDependencies、dependencies，如图：

3、配置执行命令

package.json中修改scripts属性为：

"scripts": {
    "dev": "webpack-dev-server --hot --inline --progress --colors --config config/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
  },

dev字段配置开发环境命令npm run dev：

• webapck-dev-server启动开发环境服务器，
• --config config/webpack.dev.conf.js表示输入npm run dev时，实际执行的文件是package.json同级目录下，config文件夹下的webapck.dev.conf.js文件（自己编写）。 如果去掉，将执行默认配置，这里我们将全部使用自己写的配置，以便更好地发现和解决问题。

4、创建项目目录

新增目录文件，并创建Hello World代码示例。如图所示：

• config目录存放webpack配置文件：
  a> webpack.base.conf.js为公用配置；
  b> webpack.dev.conf.js为开发环境配置，继承自webpack.base.conf.js；
  c> webpack.prod.conf.js为生产环境配置，继承自webpack.base.conf.js。
• src目录存放项目代码：
  a> main.js为项目入口文件，负责挂载react组件到<div id="app"></div>上；
  b> App.js为React项目根组件，components为具体的react组件（这些在环境搭建完成之后才会做细分）。

5、webpack开发配置

接下来的配置需先安装依赖： webpack-merge、uglifyjs-webpack-plugin。（更多配置请按需引入）
重点在于入口、出口、plugins，这几个配好了就可以启动了。其他的是后期要优化的，比如热更新、代码分离等。
webpack.base.conf.js关键配置如下：

'use strict'
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口起点
  entry: {
    app: './src/main.js',
  },
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
  },
  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  // loader
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,// 屏蔽不需要处理的文件（文件夹）（可选）
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    })
  ]
};

webpack.dev.conf.js配置如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "development",
  // 调试工具
  devtool: 'inline-source-map',
  // 开发服务器
  devServer: {
    contentBase: false,// 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录
    historyApiFallback: true,// 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    compress: true,// 启用gzip压缩
    inline: true,// 设置为true，当源文件改变时会自动刷新页面
    hot: true,// 模块热更新，取决于HotModuleReplacementPlugin
    host: '127.0.0.1',// 设置默认监听域名，如果省略，默认为“localhost”
    port: 8703// 设置默认监听端口，如果省略，默认为“8080”
  },
  // 插件
  plugins: [
    // 热更新相关
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    nodeEnv: 'development',
  }
});

.babelrc配置如下：

{
  "presets": ["latest", 'react', "stage-2"],
  "plugins": []
}

现在我们尝试启动一下npm run dev，报错如下：

babel-loader版本问题，降级到7.x.x版本（如7.1.5）即可。如下图所示即运行成功：

6、Webpack生产配置

webpack.prod.conf.js直接继承webpack.base.conf.js，执行npm run build如图所示：

生成的app.js文件有110K，对比我们的代码量来说（main.js只有233B，占空间4K），这实在太大了！
这时候我们需要的就是webpack的代码分离了：把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。
配置webpack.prod.conf.js如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "production",
  // 调试工具
  devtool: '#source-map',
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "js/[name].[chunkhash].js",
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(['dist', 'build'], {
      root: path.resolve(__dirname, '../'),
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  // 代码分离相关
  optimization: {
    nodeEnv: 'production',
    minimizer: [new UglifyJSPlugin()],
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
});

现在我们再来编译一次，如图：

可以看到由原来一个js文件（app.js）变成了三个js文件（manifest.js、vendor.js和app.js），app.js的大小也变成了一个合适的大小1.31k

总结：本来是想入坑react，没想到先研究了一遍webpack的配置。从vue-cli官方定制到纯手工一项一项的配置，学到的东西还是挺多的，也更加理解了webpack模块化的概念。目前算是对热更新、代码分离这些有了比较直观的认识，然而要学的东西还有很多，继续努力吧~