💪从零开始学习webpack系列十三(抽离公共文件)

342 阅读1分钟

抽离公共文件

有的时候需要把公共的代码抽离出来,单独打包成一个文件

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 加入缓存组的名字就可以了