happypack

由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

HappyPack就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

另外，当你的项目不是很复杂时，不需要配置 happypack，因为进程的分配和管理也需要时间，并不能有效提升构建速度，甚至会变慢。

准备

---

1. 安装happypack依赖

   yarn add happypack -D

语法

---

const Happypack = require('happypack');
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                use: 'Happypack/loader?id=js',
                include: [path.resolve(__dirname, 'src')]
            },
            {
                test: /\.css$/,
                use: 'Happypack/loader?id=css',
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules', 'bootstrap', 'dist')
                ]
            }
        ]
    },
    plugins: [
        new Happypack({
            id: 'js', //和rule中的id=js对应
            //将之前 rule 中的 loader 在此配置
            use: ['babel-loader'] //必须是数组
        }),
        new Happypack({
            id: 'css',//和rule中的id=css对应
            use: ['style-loader', 'css-loader','postcss-loader'],
        })
    ]
}

happypack 默认开启 CPU 核数 - 1 个进程，当然，我们也可以传递 threads 给 Happypack。

说明

---

说明一、如果有 postcss-loader 时

当 postcss-loader 配置在 Happypack 中，必须要在项目中创建 postcss.config.js

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

否则，会抛出错误: Error: No PostCSS Config found