webpack多进程打包技术
thread-loader’ 可以给多个loader 加多线程打包
多线程打包 loader
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// 开启多进程打包
// 进程启动大概 600ms， 进程通信 也要花时间。
// 只有工作消耗时间比较长，才需要多进程打包。
// 'thread-loader', // 进程默认 cpu核数-1
{
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'
}
}
]
],
// 开启babel缓存如果不改动，直接使用缓存中的代码
// 多次构建时，会读取之前的缓存
cacheDirectory: true
}
}
]
},
webpack.config.js
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 提取单独css文件 替代 style-loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const GenerateSW = require('workbox-webpack-plugin');
/**
* PWA: 渐进式网络开发应用程序（离线可访问）
* workbox workbox-webpack-plugin
*
* */
// 定义nodejs环境变量，决定使用 browserslist 的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
// 'style-loader',
// 提取单独css文件 替代 style-loader
MiniCssExtractPlugin.loader,
'css-loader',
{
// css 兼容处理,还需要再package.json中定义 browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
require('postcss-preset-env')()
}
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/build.[chunkhash:10].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
* 正常： 一个文件只能被一个loader处理。
* 当一个文件被多个loader处理，那么一定要制定loader执行的先后顺序
* 先执行eslint，再执行babel
* */
{
// 在 package.json中 eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
// 以下 loader 只会匹配一个
// 注意： 不能有两个配置处理同一种类型的文件，所以eslint-loader放到 oneOf以外。
oneOf: [
{
test: /\.css$/,
use: [
...commonCssLoader
]
},
{
// 执行顺序：
// 1. 从下往上 less 通过 less-loader 编译成 css，
// 2. 然后通过 破石头css-loader开始兼容处理，
// 3. 通过 css-loader加到js中，
// 4. 通过MiniCssExtractPlugin.loader 生成单独文件
test: /\.less$/,
use: [
...commonCssLoader,
'less-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
// 开启多进程打包
// 进程启动大概 600ms， 进程通信 也要花时间。
// 只有工作消耗时间比较长，才需要多进程打包。
// 'thread-loader', // 进程默认 cpu核数-1
{
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'
}
}
]
],
// 开启babel缓存如果不改动，直接使用缓存中的代码
// 多次构建时，会读取之前的缓存
cacheDirectory: true
}
}
]
},
{
// 图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
},
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
// 其它文件
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
// html 压缩
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new MiniCssExtractPlugin({
filename: 'css/build.[chunkhash:10].css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin(),
new GenerateSW.GenerateSW({
// 帮助 serviceworker 快速启动
// 删除旧的 serviceworker
// 生成一个 serviceworker 配置文件
clientsClaim: true,
skipWaiting: true
})
],
// 模式 development 开发， production 生产自动压缩js代码
mode: 'production',
devtool: 'source-map'
}