多进程打包 thread-loader
进程启动大概为600ms,进程间通信也有开销
只有工作消耗时间比较长,才需要进程打包
{
test:/.js$/,
exclude: /node_modules/,
use:[
// ‘thread-loader’
{
loader: ‘thread-loader’,
options: {
workers: 2 // 进程2个
}
}
{
loader: ‘babel-loader’,
options:{
presents: [‘
‘@babel/present-env’
{
useBuiltIns: ‘usage’,
corejs: {version:3},
targets: {
chrome: ‘60’,
firefox: ‘50’
}
}
]
}
}
]
}
externals
CDN引入后不会被打包,会从CDN中引入并使用相应的包
const { resolve } = require(‘path’);
const HtmlWebpakPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/index/js’,
output: {
filename: ‘build.js’,
path: resolve(__dirname,’build’)
},
plugins:[
new HtmlWebpackPlugin({
template: ‘./src/index.html’
})
],
mode: ‘production’,
externals: {
// 忽略库名 — npm包名
jquery:’jQuery’ // 拒绝jQuery被打包进来
}
}
注意:需要在HTML中通过CDN引入
dll 将不同的文件打包为不同的chunk
webpack.dll.js
/
使用dll技术,对某些库(第三方库:jquery、react、vue…)进行单独打包
需求: 需要运行webpack.dll.js
—webpack —config webpack.dll.js
/
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:[
new webpack.DllPlugin({
name: ‘[name][hash]’, // 映射库暴露的内容是什么
path: resolve(dirname,’dll/mainfest.json’) // 输出文件路径
})
],
mode:’production’
}
// 告诉webpack哪些库不参与打包,同时使用时的名称也得变
new webpack.DllReferencePlugin({
manifest: resolve(dirname,’dll/mainfest.json’)
})
// 将某个文件打包输出去,并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin{
filepath: resolve(dirname, ‘dll/jquery.js’)
}