多进程打包

需要用到 thread-loader , 

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

process.env.NODE_ENV = 'production'

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'bundle.[contenthash:10].js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                enforce: 'pre', //优先执行,正常的,一个文件只能被一个loader处理,当一个文件要被多个loader处理,一定要指定loader执行的先后顺序,先执行eslint再执行babel
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            //以下loader中只会匹配一个,注意不能有两个loader处理同一种类型文件,所以eslint-loader放在oneOf匹配之前执行
            {
                oneOf: [
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use:[
                            {
                                //开启多进程打包
                                loader:'thread-loader',
                                options:{
                                    workers:2  //进程2个
                                }
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    presets: [
                                        ['@babel/preset-env', {
                                            useBuiltIns: 'usage',
                                            corejs: { version: 3 },
                                            targets: {
                                                chrome: '60',
                                                firefox: '50'
                                            }
                                        }]
                                    ],
                                    cacheDirectory: true //开启babel缓存,第二次构建时,会读取之前的缓存
                                }
                            }
                        ],
                    },
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production'
}

进程启动大概为 600ms,进程通信也有开销,当只有工作消耗时间比较长时,才需要多进程打包

 

posted @ 2020-06-06 20:12  shanlu  阅读(342)  评论(0编辑  收藏  举报