需要用到 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,进程通信也有开销,当只有工作消耗时间比较长时,才需要多进程打包