webpack中css-loader处理背景图生成异常jpg文件问题咨询

• file-loader默认启用esModule导出配置，会将图片资源封装为ES模块导出，css-loader处理css内的url引用时，无法直接解析该ES模块的导出值，直接将模块导出的JS代码作为文件内容输出，生成了内容异常的jpg文件。
• 若使用Webpack 5版本，其内置的Asset Modules资源处理能力默认会对图片类资源进行处理，和你配置的file-loader产生冲突，导致图片被重复处理，最终生成错误文件。

提供两种可选择的修复方案：

• 方案1：使用Webpack 5原生资源模块（推荐，无需额外依赖file-loader）
  直接删除原有file-loader配置，替换为Webpack 5原生Asset Modules配置即可：

module.exports = {
  // 其他配置保持不变
  module: {
    rules: [
      // 其他原有rule保持不变
      // 替换原有的file-loader对应的rule为以下内容
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: '[name].[ext]'
        }
      }
    ]
  }
}

• 方案2：保留file-loader，修复冲突配置
  如果需要继续使用file-loader，根据你使用的Webpack版本调整配置：
  • Webpack 4环境，仅需关闭file-loader的esModule配置：

  {
    test: /\.(png|jpe?g|gif)$/i,
    loader: "file-loader",
    options: {
      name: "[name].[ext]",
      esModule: false // 新增该配置，关闭ES模块导出
    },
  }
  

  • Webpack 5环境，需同时禁用内置资源处理并关闭esModule：

  {
    test: /\.(png|jpe?g|gif)$/i,
    type: 'javascript/auto', // 禁用Webpack5内置的资源处理逻辑，避免冲突
    loader: "file-loader",
    options: {
      name: "[name].[ext]",
      esModule: false
    },
  }
  

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