webpack5 多进程打包

一、多进程打包

一、插件

happypack

二、配置

// webpack.prod.js

const { merge } = require('webpack-merge')
const HappyPack = require('happypack')
const webpackCommonConf = require('./webpack.common.js')

module.exports = merge(webpackCommonConf, {

    // ...

    module: {
        rules: [
            // js
            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },
           
            // ...
        ]
    },
    plugins: [
        // ...
        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            use: ['babel-loader?cacheDirectory']
        }),

        // ...
    ],

    // ...
})

二、多进程压缩

一、插件

webpack-parallel-uglify-plugin

二、配置

// webpack.prod.js

const { merge } = require('webpack-merge')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const webpackCommonConf = require('./webpack.common.js')

module.exports = merge(webpackCommonConf, {

    // ...

 
    plugins: [
        // ...

        // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })

        // ...
    ],

    // ...
})