多进程打包
进程启动大概为600ms,进程通信也有开销
如果开始进程,需配置:thread-loader0
{
test: /.js$/,
exclude: /node_modules/,
use: [
/**
* 开始多进程打包
* 进程启动大概为600ms,进程通信也有开销。
* 只有工作消耗时间比较长,才需要多进程打包
*/
//'thread-loader', // 或者
{
loader: 'thread-loader',
options: {
workers: 2 // 进程2个
}
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '70',
firefox: '55'
}
}
]
],
// 开始babel缓存
// 第二次构建时,会读取之前的缓存
cacheDirectory: true
}
}
]
},
externals
externals:忽略打包内容
externals: {
// 拒绝jQuery被打包进来
jquery: 'jQuery'
}
dll
- Dll技术:对某些库(第三方库:jquery、react、vue...)进行单独打包
- 只需要一次运行打包:webpack --config webpack.dll.js
/**
* 使用dll技术,对某些库(第三方库:jquery、react、vue...)进行单独打包
* 当你运行webpack时,默认查找webpack.config.js配置文件
* 需求:需要运行webpack.dll.js文件
* --> webpack --config webpack.dll.js
*/
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
// 最终打包生成的[name] --> jquery
// ['jquery'] --> 要打包的库是jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
},
plugins: [
// 打包生成一个 manifest.json --> 提供和jquery映射
new webpack.DllPlugin({
name: '[name]_[hash]', // 映射库暴露的内容名称
path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
})
],
mode: 'production'
}
- 需要引入插件add-asset-html-webpack-plugin
npm install add-asset-html-webpack-plugin -D - 在webpack.config.json中引入和配置如下:
需要引入webpack自身插件
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
在plugins配置如下:
// 告诉webpack哪些库不参与打包,同时使用时的名称也得变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname, 'dll/manifest.json')
}),
// 将某个文件打包输出去,并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js')
})