ERROR in Conflict: Multiple assets emit different content to the same filename i

irpas 02-07 6185

前置期望：多入口起点，多个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配置信息省略 }