Webpack 5升级后出现多资源输出冲突错误求助

你遇到的ERROR in Conflict: Multiple assets emit different content to the same filename fonts/Montserrat-Regular.ttf错误，核心原因是同一个字体文件被Webpack多次尝试输出到同一路径，结合你的配置，主要有两个问题：

• style-loader与MiniCssExtractPlugin.loader冲突：在.css规则中同时使用了这两个loader，前者将CSS注入到JS的style标签，后者将CSS提取为独立文件，二者同时使用会导致资源处理逻辑混乱，间接引发字体文件重复输出。
• Webpack 5与file-loader的兼容性问题：Webpack 5已内置asset modules替代传统的file-loader/url-loader，继续使用file-loader会与内置资源处理逻辑冲突，导致同一文件被多次处理输出。

解决方案 #

步骤1：修复CSS loader冲突 #

修改.css和.s[ac]ss规则，根据开发/生产环境切换使用style-loader或MiniCssExtractPlugin.loader，不能同时启用：

// 替换原有的.css规则
{
  test: /\.css$/,
  use: [
    // 开发环境用style-loader注入样式，生产环境用插件提取独立CSS文件
    isDev ? "style-loader" : MiniCssExtractPlugin.loader,
    "css-loader"
  ],
},
// 替换原有的.s[ac]ss规则
{
  test: /\.s[ac]ss$/i,
  use: [
    isDev ? "style-loader" : MiniCssExtractPlugin.loader,
    "css-loader",
    "sass-loader",
  ],
},

步骤2：替换file-loader为Webpack 5内置Asset Modules #

删除所有file-loader相关规则，改用Webpack 5原生的asset/resource类型处理静态资源：

处理字体文件

{
  test: /(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name].[ext]'
  }
}

处理图片/PDF

{
  test: /\.(png|jpe?g|gif|pdf)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'images/[name].[ext]'
  }
}

处理视频文件

{
  test: /\.(mov|mp4)$/,
  type: 'asset/resource',
  generator: {
    filename: 'video/[name].[ext]'
  }
}

步骤3：清理依赖 #

卸载不再需要的file-loader：

npm uninstall file-loader
# 或 yarn remove file-loader

可选优化：添加内容哈希避免缓存问题 #

为静态资源文件名添加contenthash，既能避免潜在的重复文件名冲突，又能优化浏览器缓存：

generator: {
  filename: 'fonts/[name].[contenthash].[ext]'
}

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