webpack 4.0 happypack

happypack是用来多线程打包
首先安装yarn add happypack -D

// webpack.config.js
let path = require("path");
let HappyPack = require('happypack');
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  devServer: {
    ...
  },
  output: {
    ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve("src"),
        use: 'happy/loader?id=js'   //此处将之前配置的babel的一些预设什么的替换为happy/loader。id=js，因为happy也可以打包css,
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      use: [{     // 将js的具体规则放置在此处
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ]
        }
      }]
    })
 ]
};

打包效果：

215244.png
可以看到，启用了三个线程来打包。其实在项目较小时，没有必要使用happypack。项目较大时，具体效果才能显现出来。