webpack4多入口应用使用splitChunks拆分代码后，HtmlWebpackPlugin无法注入 vendor.bundle和runtime.bundle
入口：
entry: {
app: path.join(__dirname, ‘../src/app.js’),
main: path.join(__dirname, ‘../src/main.js’)
},
HtmlWebpackPlugin配置
new HtmlWebpackPlugin({
chunks: [‘main’],
filename: ‘main.html’,
template: path.join(__dirname, ‘../index.html’),
inject: true,
minify: {
removeComments: true
}
}),
new HtmlWebpackPlugin({
title: ‘app’,
chunks: [‘app’],
filename: ‘app.html’,
template: path.join(__dirname, ‘../app.html’),
inject: true,
minify: {
removeComments: true
}
})
optimization配置
optimization: {
splitChunks: {
chunks: ‘all’
},
runtimeChunk: {}
}
打包完成后：
图片描述
但是生成的 main.html 仅仅注入了 main.bundle，没有vendors~main.bundle.js和runtime~main.bundle.js
HtmlWebpackPlugin中的chunks数组中需要定义对应的chunkname
splitChunks: {
chunks: ‘all’,
maxInitialRequests: 5,
cacheGroups: {
default: false,
vendors: {
test: /[\\/]node_modules[\\/]/,
},
},
},
runtimeChunk: {
“name”: “manifest”
}
转载请注明：XAMPP中文组官网 » webpack4多入口splitChunks拆分代码，HtmlWebpackPlugin无法注入 vendor和runtime