抽离公共文件
❝有的时候需要把公共的代码抽离出来,单独打包成一个文件
❞
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
common: {
minChunks: 2,
chunks: 'initial',
minSize: 0
}
},
},
}
- 「cacheGroups」:缓存组
- 「minChunks」:被引用多少次才进行抽离
-
「chunks」:选择哪些块进行优化,可以是
all
,async
,initial
- 「minSize」:要生成的块的最小大小
抽离第三方代码库
splitChunks: {
cacheGroups: {
vendor: {
test:/node_modules/,
minChunks: 2,
chunks: 'initial',
minSize: 0,
name:"common"
},
common: {
minChunks: 2,
chunks: 'initial',
minSize: 0,
name:"common"
}
},
}
- vendor 就是第三方组件库了
引用
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunks: ['index',"common"]
}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunks: ['about',"common"]
}),
new HtmlWebpackPlugin({
title: '首页',
minify: false,
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.html'),
chunks: ['index',"common"]
}),
new HtmlWebpackPlugin({
title: '关于',
minify: false,
filename: 'about.html',
template: path.resolve(__dirname, 'src/about.html'),
chunks: ['about',"common"]
})
- 在 chunks 加入缓存组的名字就可以了