升级webpack5与css-loader5后css生成url带auto前缀如何解决

结论 #

该现象不属于bug，是css-loader v4及以上版本的默认配置变更与extract-loader的兼容性问题导致的。

原因说明 #

css-loader从v4.0.0版本开始默认启用ES模块导出能力，对于css中引用的静态资源，会默认添加auto前缀作为ES模块的内部标识。你当前使用的extract-loader v5默认仅支持解析commonjs格式的导出内容，无法正确识别处理该前缀，最终会将auto直接写入到最终生成的css文件的url路径中。

解决方案 #

在css-loader的配置中新增esModule: false配置，关闭其ES模块导出的默认行为即可，调整后的webpack配置对应规则如下：

// css处理规则调整
{
  resource: /\.css$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash].css'
      }
    },
    {
      loader: 'extract-loader'
    },
    {
      loader: 'css-loader',
      // 新增以下配置项
      options: {
        esModule: false
      }
    }
  ],
}

如果修改后问题仍然存在，可以同步给处理png资源的file-loader也添加esModule: false配置：

// png资源处理规则调整
{
  test: /\.png$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[hash].[ext]',
      esModule: false
    }
  }
}

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