webpack happypack 多线程打包，当工程比较大的时候可以使用多线程打包

 
操作步骤:
1、安装happypack插件
 yarn add happypack
2、配置
// 导入多线程打包
let Happypack = require('happypack')
//
module.exports = {
plugins: [
// js声明多线程打包
new Happypack({
id: 'js',
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
]
}),
//css 多线程打包
new Happypack({
id: 'css',
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
})
],
module: {
// loader
rules: [
{
test: /\.css$/, //匹配css文件
use: 'Happypack/loader?id=css'
},
{
test: /\.less$/, //匹配less文件
use: 'Happypack/loader?id=css'
},
{
test: /\.js$/, //匹配js文件
use: 'Happypack/loader?id=js'
}
]
}
}
 
完整案例：
build/webpack.base.config.js
 
// 开发和生成模式共同的配置
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
//
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//
let webpack = require('webpack');
// 导入多线程打包
let Happypack = require('happypack')
// webpack相关配置
module.exports = {
// 入口,表示从哪里开始打包
entry: {
home: './src/index.js'
},
// 表示出口(输出后文件相关配置)
output: {
// 打包后的文件名 多入口根据入口名称生成
filename: 'build.js',
// 输出后的路径(必须是一个绝对路径)
path: path.resolve(__dirname, '../dist')
},
// 插件配置
plugins: [
new HtmlWebpackPlugins({
// 模板位置
template: 'index.html',
// 文件名
filename: 'index.html'
}),
// 抽离css为单独文件
new MiniCssExtractPlugin({
filename: 'main.css'
}),
// js声明多线程打包
new Happypack({
id: 'js',
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
]
}),
//css 多线程打包
new Happypack({
id: 'css',
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
})
],
//
resolve: {
// 解析三方库文件
//modules: [ path.resolve('node_modules') ],
// 扩展名
extensions: ['.js', '.css', '.json', '.vue'],
// 定义路径别名
alias: {
'@': path.resolve('src')
}
},
module: {
// loader
rules: [
{
test: /\.css$/, //匹配css文件
use: 'Happypack/loader?id=css'
},
{
test: /\.less$/, //匹配less文件
use: 'Happypack/loader?id=css'
},
{
test: /\.js$/, //匹配js文件
use: 'Happypack/loader?id=js'
}
]
}
}