1.js文件 多入口配置:
在公共配置中配置多入口
[webpack.common.js]:
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
生产环境配置多出口
[webpack.prod.js]:
output: {
// filename: 'bundle.[contentHash:8].js', // 单入口配置打包代码时,加上 hash 戳
filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key :index 、other
path: distPath,
},
2.生成多个html文件
针对上述配置的多入口js文件,分别生成多个html文件
在公共配置中配置:
[webpack.common.js]:
plugins: [
//单入口时 生成index.html
// new HtmlWebpackPlugin({
// template: path.join(srcPath, 'index.html'),
// filename: 'index.html'
// })
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index'] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other'] // 只引用 other.js
})
]