当代码多的时候，我们可以通过多线程打包来提高打包速度。

多线程打包的支持插件是——happypack

如果代码量少的情况（比如一个demo）不建议使用，因线程消耗，打包速度会变慢。

下面讲一下happypack怎么用

01 多线程打包js

没用happypack之前，我们加载js文件是这样配置babel-loader的：

module.exports = {
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: {
          //用 babel-loader 把es6转es5
          loader: "babel-loader",
        }
      },
    ]
  }
}

采用happypack，我们需要将webpack配置修改成如下风格。

主要是用happypack插件包裹了babel-loader。

const Happypack = require('happypack')//happypack 模块插件 可实现多线程打包

module.exports = {
  plugins: [//存放所有插件
    new Happypack({
      id: 'js',
      use: [{
        //用 babel-loader 把es6转es5
        loader: "babel-loader",
      }]
    }),
  ],
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',//这里的js是指定id为js的happypack插件
      },
    ]
  }
}

运行：

npx webpack

查看结果：
从日志中可发现采用了三个线程来编译。

maomaoMacBook-Pro:mm_webpack maomao$ npx webpack
Happy[js]: Version: 5.0.1. Threads: 3
Happy[js]: All set; signaling webpack to proceed.
(node:3342) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(node:3342) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
assets by status 343 KiB [cached] 1 asset
asset bundle.6028c3fb.js 1.61 KiB [emitted] [immutable] (name: main) 1 related asset
asset index.html 500 bytes [emitted]
./src/aaa.js 1.44 KiB [built] [code generated]
webpack 5.21.2 compiled successfully in 3044 ms

但实际上我用默认打包方式（不使用happypack）的编译时间更快，因为开线程也需要消耗资源。

下面是原始打包结果：

maomaoMacBook-Pro:mm_webpack maomao$ npx webpack
(node:3400) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(node:3400) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
assets by status 345 KiB [cached] 2 assets
asset index.html 500 bytes [compared for emit]
./src/aaa.js 1.44 KiB [built] [code generated]
webpack 5.21.2 compiled successfully in 1262 ms
maomaoMacBook-Pro:mm_webpack maomao$ 

02 多线程打包css

没用happypack之前，我们加载css文件是这样配置的：

module.exports = {
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.css$/,//匹配到css结尾的文件，加载css-loader，
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"]
      },
    ]
  }
}

采用happypack，我们需要将webpack配置修改成如下风格。

主要是用happypack插件包裹了css-loader。

我们在前面加载js文件的基础上，添加css文件多线程打包：

const Happypack = require('happypack')//happypack 模块插件 可实现多线程打包

module.exports = {
  plugins: [//存放所有插件
    new Happypack({
      id: 'js',
      use: [{
        //用 babel-loader 把es6转es5
        loader: "babel-loader",
      }]
    }),
    new Happypack({
      id: 'css',
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"]
    }),
  ],
  module: {//模块
    rules: [//规则，多个loader
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',//这里的js是指定id为js的happypack插件
      },
      {
        test: /\.css$/,
        use: 'happypack/loader?id=css',//这里的css是指定id为css的happypack插件
      },
    ]
  }
}

运行：

npx webpack

发现，加上js多线程和css多线程，一共开了6个线程进行打包。

maomaoMacBook-Pro:mm_webpack maomao$ npx webpack
Happy[js]: Version: 5.0.1. Threads: 3
Happy[js]: All set; signaling webpack to proceed.
Happy[css]: Version: 5.0.1. Threads: 3
Happy[css]: All set; signaling webpack to proceed.
(node:3491) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(node:3491) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
assets by status 345 KiB [cached] 2 assets
asset index.html 500 bytes [compared for emit]
./src/aaa.js 1.44 KiB [built] [code generated]
webpack 5.21.2 compiled successfully in 1432 ms
maomaoMacBook-Pro:mm_webpack maomao$ 

打包时间进一步提升。

总结

1. happypack插件用于多线程打包。
2. 代码量大的项目适用，小项目不建议使用。

END