面试题：Webpack HappyPack与其他优化插件的协同及深度定制

Question

假设当前Webpack项目已经使用了如TerserPlugin等优化插件，如何让HappyPack与之协同工作以达到最优的打包性能？若HappyPack的默认配置不能满足项目需求，如何对其进行深度定制？

Answer 1

让HappyPack与TerserPlugin协同工作以达最优打包性能

1. 配置HappyPack：
   • 首先安装happy - pack：npm install happy - pack --save - dev。
   • 在Webpack配置文件中引入HappyPack：

const HappyPack = require('happy - pack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

• 然后在module.rules中配置HappyPack的loader。例如，对于Babel处理JavaScript文件：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['HappyPack/loader?id=js']
}

• 并在Webpack配置的plugins中添加HappyPack插件实例：

plugins: [
    new HappyPack({
        id: 'js',
        loaders: ['babel - loader'],
        threadPool: happyThreadPool,
        verbose: true
    })
]

2. TerserPlugin配置：
   • TerserPlugin默认已经与Webpack集成得较好。在Webpack配置的optimization.minimizer数组中，确保TerserPlugin配置正确。例如：

optimization: {
    minimizer: [
        new TerserPlugin({
            parallel: true, // 开启并行压缩，利用多核CPU
            terserOptions: {
                compress: {
                    drop_console: true // 例如，去除console.log
                }
            }
        })
    ]
}

3. 协同要点：
   • HappyPack主要在模块转换阶段（如Babel转译等）利用多线程提高效率，而TerserPlugin在压缩代码阶段工作。由于它们处于不同的打包阶段，只要各自配置合理利用多核CPU（HappyPack通过threadPool，TerserPlugin通过parallel），就能协同提高打包性能。

深度定制HappyPack

1. 定制loaders：
   • 如果默认的loaders不能满足需求，例如在处理JavaScript文件时，除了Babel转译还需要进行ESLint检查。可以这样配置：

new HappyPack({
    id: 'js',
    loaders: ['babel - loader', 'eslint - loader'],
    threadPool: happyThreadPool,
    verbose: true
})

2. 定制缓存：
   • HappyPack默认有缓存机制，但可以进一步定制。例如，通过设置cache选项来控制缓存的行为：

new HappyPack({
    id: 'js',
    loaders: ['babel - loader'],
    threadPool: happyThreadPool,
    cache: true,
    cacheDirectory: '.happypack_cache' // 自定义缓存目录
})

3. 定制线程池：
   • 除了设置线程池大小，还可以对线程池的其他属性进行定制。例如，设置线程的存活时间等（虽然这种情况较少见）：

const customThreadPool = new HappyPack.ThreadPool({
    size: os.cpus().length,
    // 假设HappyPack支持设置线程存活时间（实际不一定有此选项，仅为示例）
    threadKeepAliveTime: 10000 
});

new HappyPack({
    id: 'js',
    loaders: ['babel - loader'],
    threadPool: customThreadPool,
    verbose: true
})

4. 定制错误处理：
   • 可以通过errorDeps选项来定制错误处理。例如，如果某个loader失败，希望跳过该模块并继续打包其他模块：

new HappyPack({
    id: 'js',
    loaders: ['babel - loader'],
    threadPool: happyThreadPool,
    errorDeps: true
})