webpack中file-loader生成两张图片且html错误引用0字节文件问题

问题原因 #

你遇到的构建生成两张重复图片、publicPath不生效、html引用无效0字节文件的问题，是webpack 5内置的**资产模块(Asset Modules)**和你手动配置的file-loader重复处理资源导致的冲突。webpack 5默认会自动处理html、css中引用的图片等静态资源，不需要额外安装file-loader，两套处理逻辑同时运行时，就会生成两份文件：一份是file-loader输出的符合配置的正常文件，另一份是内置资产模块输出的根目录下的无效文件，且html最终会引用内置模块的处理结果，所以你的file-loader配置的publicPath不会生效。

解决方案 #

提供两种可直接落地的修改方式，优先推荐使用webpack内置的资产模块，file-loader在webpack 5中已经被官方标记为待淘汰的旧方案。

方案1：替换file-loader为内置Asset Modules（推荐）

删除原有file-loader的配置规则，替换为以下配置：

module.exports = {
  // 其他原有配置保持不变
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].[contenthash].js',
    // 可根据你的部署路径调整全局publicPath，比如部署在二级目录就填'/二级目录/'
    publicPath: './'
  },
  module: {
    rules: [
      // 其他原有loader规则保持不变
      {
        test: /\.(svg|png|jpg|gif)$/,
        type: 'asset/resource',
        generator: {
          // 等价于原有file-loader配置的name + outputPath效果
          filename: 'images/[name].[hash][ext]'
        }
      },
    ]        
  },
  // 其他原有插件配置保持不变
}

方案2：保留file-loader，禁用webpack默认资产处理

如果你需要继续使用file-loader，只需要在原file-loader的配置规则中新增type: 'javascript/auto'，告诉webpack不要用内置逻辑处理匹配到的资源，完全交给file-loader处理即可：

{
  test: /\.(svg|png|jpg|gif)$/,
  type: 'javascript/auto', // 新增这一行即可解决冲突
  use:{
    loader: 'file-loader',
    options: {
      name: '[name].[hash].[ext]',
      outputPath: 'images/',
      publicPath: 'images/'
    }
  }
}

修改完成后重新执行构建，就不会生成重复的无效文件，html中的图片引用路径也会自动变为符合配置的images/[name].[hash].[ext]格式。

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