webpack-cli报错：多chunk输出同名文件，需固定生成my-app.js

报错原因 #

你遇到的[webpack-cli] Error: Conflict: Multiple chunks emit assets to the same filename billing-dashboard-ui.js (chunks main and runtime)错误，根源在于配置的两个设置冲突：

• 开启了optimization.runtimeChunk: 'single'，这会把Webpack的运行时代码单独提取为一个独立的runtime chunk
• 同时output.filename设为固定值my-app.js，导致主业务chunk（main）和runtime chunk都试图输出到同一个文件，引发命名冲突

解决方案（二选一，按需选择） #

方案1：关闭runtimeChunk提取（推荐，若无需单独分离运行时） #

如果项目不需要单独提取运行时代码，直接移除或禁用runtimeChunk配置即可：

修改webpack.config.js的optimization部分：

optimization: {
  // 移除 runtimeChunk: 'single' 或设置为 false
  splitChunks: false,
},

修改后Webpack只会生成一个主业务chunk，输出为my-app.js，不会出现文件名冲突。

方案2：保留runtimeChunk，为不同chunk指定不同文件名 #

如果必须保留runtimeChunk（比如需要做长期缓存优化），可以通过chunkFilename为runtime chunk单独指定文件名，避免和主chunk冲突：

修改webpack.config.js的output和optimization部分：

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'my-app.js', // 主业务chunk输出文件名
  chunkFilename: 'runtime.js', // runtime chunk输出文件名
},
optimization: {
  runtimeChunk: 'single',
  splitChunks: false,
},

此时主业务chunk输出为my-app.js，runtime chunk输出为runtime.js，两者文件名不同，不会冲突。同时HtmlWebpackPlugin会自动将这两个文件注入到index.html中，无需额外配置。

内容的提问来源于stack exchange，提问作者AFAF