使用happypack开启多进程Loader转换

参考网址

安装

  1. npm i -D happypack

插件配置

webpack.config.js 配置

  1. const HappyPack = require('happypack')
  2. const os = require('os')
  3. const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
  5. module.exports = {
  6.     plugins: [
  7.     new HappyPack({
  8.         //用id来标识 happypack处理那里类文件
  9.       id: 'happyBabel',
  10.       //如何处理  用法和loader 的配置一样
  11.       loaders: [{
  12.         loader: 'babel-loader?cacheDirectory=true',
  13.       }],
  14.       //共享进程池
  15.       threadPool: happyThreadPool,
  16.       //允许 HappyPack 输出日志
  17.       verbose: true
  18.     })
  19.   ]
  20. }

vue.config.js配置

  1. const HappyPack = require('happypack')
  2. const os = require('os')
  3. const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
  5. module.exports = {
  6.     chainWebpack(config) {
  7.       config
  8.       .plugin('HappyPack')
  9.       .use(HappyPack, [{
  10.         // 用id来标识 happypack处理那里类文件
  11.         id: 'happyBabel',
  12.         // 如何处理  用法和loader 的配置一样
  13.         loaders: [{
  14.           loader: 'babel-loader?cacheDirectory=true'
  15.         }],
  16.         // 共享进程池
  17.         threadPool: happyThreadPool,
  18.         // 允许 HappyPack 输出日志
  19.         verbose: true,
  20.       }])
  21.   }
  22. }
  • 在 Loader 配置中，所有文件的处理都交给了 happypack/loader 去处理，使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
  • 在 Plugin 配置中，新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应，选项中的 loaders 属性和 Loader 配置中一样。

参数解析

  • id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件.
  • loaders: Array 用法和 webpack Loader 配置中一样.
  • threads: Number 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。
  • verbose: Boolean 是否允许 HappyPack 输出日志，默认是 true。
  • threadPool: HappyThreadPool 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。
  • verboseWhenProfiling: Boolean 开启webpack —profile ,仍然希望HappyPack产生输出。
  • debug: Boolean 启用debug 用于故障排查。默认 false。