使用Dart-SASS编译时Webpack报多Chunk冲突错误求助

问题描述 #

我在Webpack项目中尝试配置SCSS，编译时出现错误：
Error: Conflict: Multiple chunks emit assets to the same filename main.js (chunks index and runtime)
即使不在index.js中导入SCSS文件，该错误依然存在。

我的webpack.config.js配置如下：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: './dist'
  },
  devtool: 'inline-source-map',
  optimization: {
    runtimeChunk: 'single'
  },
  // to use SASS
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ]
      }
    ]
  }
};

问题原因与解决方案 #

根源 #

错误和SCSS配置无关，问题出在optimization.runtimeChunk: 'single'和output.filename: 'main.js'的冲突上。开启runtimeChunk: 'single'后，Webpack会单独生成一个包含运行时代码的chunk，而固定的main.js文件名导致这个runtime chunk和你的index chunk试图输出到同一个文件，从而引发冲突。

修复方案 #

你可以选择以下任意一种方式解决：

1. 使用占位符生成动态文件名
   修改output.filename为带[name]占位符的格式，让不同chunk根据自身名称生成对应的文件：

   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
   }
   

   这样index chunk会生成index.js，runtime chunk会生成runtime.js，彻底避免重名问题。

2. 指定runtime chunk的单独名称
   如果希望保持主文件名为main.js，可以单独给runtime chunk设置名称：

   optimization: {
     runtimeChunk: {
       name: 'runtime'
     }
   },
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
   }
   

   最终会生成main.js（对应index chunk）和runtime.js（对应运行时chunk）。

3. 关闭runtimeChunk（无需单独提取运行时代码时）
   直接移除或禁用runtimeChunk配置：

   optimization: {
     runtimeChunk: false
   }
   

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