Webpack4从零搭建React开发环境

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

github项目地址

一、npm init初始化项目

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

二、安装依赖

• 安装开发环境依赖：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，如图：

三、配置执行命令

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文件（本身编写）。 若是去掉，将执行默认配置，这里咱们将所有使用本身写的配置，以便更好地发现和解决问题。

四、建立项目目录

新增目录文件，并建立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组件（这些在环境搭建完成以后才会作细分）。

五、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）便可。以下图所示即运行成功：

六、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模块化的概念。目前算是对热更新、代码分离这些有了比较直观的认识，然而要学的东西还有不少，继续努力吧~