前置期望:多入口起点,多个HTML,每个HTML配置一个入口起点
初始出错的webpack关键配置信息
module.exports = {
mode: 'development',
entry: {
entry1: './src/entry1/index.ts',
entry2: './src/entry2/index.ts'
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'entry1_HTML_FILE',
inject: "body",
template: "./src/entry1_sub_directory/entry1_template.html",
chunks: ['entry1']
}),
new HtmlWebpackPlugin({
title: 'entry2_HTML_FILE',
inject: "body",
template: "./src/entry2_sub_directory/entry2_template.html",
chunks: ['entry2']
})
],
// BLOG Author: 埃里克森枫
// ...其他webpack配置信息省略
}执行打包命令后得到错误信息
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
出错点是插件Html Webpack Plugin 使用了默认的filename(index.html)导致的
因此指定filename就能解决
参考官方文档修改filename
https://github.com/jantimon/html-webpack-plugin#options
filename{String|Function}'index.html'The file to write the HTML to. Defaults to
index.html. You can specify a subdirectory here too (eg:assets/admin.html). The[name]placeholder will be replaced with the entry name. Can also be a function e.g.(entryName) => entryName + '.html'.
修改后的webpack 配置文件:
module.exports = {
mode: 'development',
entry: {
entry1: './src/entry1/index.ts',
entry2: './src/entry2/index.ts'
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'entry1_HTML_FILE',
inject: "body",
filename: 'entry1.html', // 此处新增
template: "./src/entry1_sub_directory/entry1_template.html",
chunks: ['entry1']
}),
new HtmlWebpackPlugin({
title: 'entry2_HTML_FILE',
inject: "body",
filename: 'entry2.html', // 此处新增
template: "./src/entry2_sub_directory/entry2_template.html",
chunks: ['entry2']
})
],
// BLOG Author: 埃里克森枫
// ...其他webpack配置信息省略
}
版权声明:本文为qq_24047665原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。