ERROR in Conflict: Multiple assets emit different content to the same filename index.html

╰+攻爆jí腚メ 2024-04-06 13:38 70阅读 0赞

![8549a5f3a04e4a3e9cc5b90ba0bcd54a.png][]

前置期望：多入口起点，多个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']
         })
      ],
       
       // ...其他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][https_github.com_jantimon_html-webpack-plugin_options]

修改后的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']
         })
      ],
    
       // ...其他webpack配置信息省略
    }

[8549a5f3a04e4a3e9cc5b90ba0bcd54a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/738962e3e483495fa23bd9c35c0cf231.png
[https_github.com_jantimon_html-webpack-plugin_options]: https://github.com/jantimon/html-webpack-plugin#options