美文网首页
happypack 提升 Webpack 构建速度

happypack 提升 Webpack 构建速度

作者: 海豚先生的博客 | 来源:发表于2022-11-01 11:19 被阅读0次

    Happypack 的作用就是将文件解析任务分解成多个子进程并发执行,发挥多核 CPU 电脑的威力。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度*
    待实践
    webpack.config.js

    npm install happypack -D
    
    const HappyPack = require('happypack');
    const os = require('os');
    const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
            loader: 'happypack/loader?id=happyBabel',
            //排除node_modules 目录下的文件
            exclude: /node_modules/
          },
          {
                test: /\.(css|less)$/,
                use: 'happypack/loader?id=styles'
          },
        ]
      },
    plugins: [
        new HappyPack({
            //用id来标识 happypack处理那里类文件
          id: 'happyBabel',
          //如何处理  用法和loader 的配置一样
          loaders: [{
            loader: 'babel-loader?cacheDirectory=true',
          }],
          //共享进程池
          threadPool: happyThreadPool,
          //允许 HappyPack 输出日志
          verbose: true,
        }),
        new HappyPack({
            id: 'styles',
            loaders: [ 'style-loader', 'css-loader', 'less-loader' ],
            //共享进程池
            threadPool: happyThreadPool,
        });
      ]
    }
    

    相关文章

      网友评论

          本文标题:happypack 提升 Webpack 构建速度

          本文链接:https://www.haomeiwen.com/subject/ujkjtdtx.html