Webpack打包生成重复图片且其中一张损坏无法加载问题求助

你遇到的是Webpack 5版本的典型配置冲突问题：Webpack 5 内置了「资源模块（Asset Modules）」能力，默认会自动处理png、jpg、svg、gif等格式的静态资源，你同时额外配置了file-loader，导致同一张图片被两个处理逻辑分别处理了两次，因此生成了两个图片文件，其中一个为失效状态，CSS中引用到的刚好是失效文件的路径。

优先选择第一种方案，适配Webpack最新的设计规范

方案1：使用Webpack 5内置资源模块（推荐） #

直接移除file-loader相关配置，替换为内置能力即可，修改webpack.config.js的module.rules部分：

1. 删除原来的图片处理规则：

// 删掉以下这段配置
{
  test: /\.(png|jpg|svg|gif)$/,
  use: ['file-loader']
}

2. 替换为以下资源模块配置：

{
  test: /\.(png|jpg|svg|gif)$/,
  type: 'asset/resource',
  generator: {
    // 可根据需求自定义输出的图片路径和文件名规则
    filename: 'assets/[name].[contenthash][ext]'
  }
}

3. 卸载项目中已安装的file-loader依赖：

npm uninstall file-loader
# 用yarn的话执行 yarn remove file-loader

方案2：保留file-loader，关闭内置资源处理 #

如果你有特殊需求需要继续使用file-loader，可在配置中关闭Webpack 5默认的资源处理逻辑，在module配置项下新增parser规则：

module: {
  parser: {
    asset: {
      dataUrlCondition: {
        // 完全禁用内置资源模块的自动处理
        maxSize: 0
      }
    }
  },
  rules: [
    // 原有所有规则保持不变
  ]
}

修改完成后，删除项目下的dist文件夹和node_modules/.cache文件夹，重新执行打包命令即可解决重复图片、路径失效的问题。

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