Webpack staging环境下如何重写输出CSS文件内的静态资源URL

问题核心原因及修复步骤 #

• 1. css-loader关闭了URL处理逻辑
     你当前配置中css-loader的url: false会直接跳过所有url()路径的解析改写，这是publicPath不生效的最主要原因，将该配置改为url: true即可开启路径处理能力。
• 2. file-loader变量引用错误
     你定义的公共路径变量名为public_path，但file-loader配置中误写为publicPath: publicPath，变量名不匹配导致配置无法读取，修正为publicPath: public_path即可。
• 3. 静态资源loader顺序冲突
     url-loader需要放在file-loader之前执行，若你不需要将小体积静态资源转为base64，可直接移除url-loader避免规则冲突。
• 4. resolve-url-loader冗余配置
     resolve-url-loader仅用于处理sass编译后相对路径偏差问题，不需要额外配置root和publicPath，删除你注释的root相关配置保持默认即可。

修正后的核心配置片段 #

// scss处理规则修改
{
  test: /\.s?css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: public_path,
        sourceMap: true
      }
    },
    {
      loader: 'css-loader',
      options: {
        url: true, // 改回true开启URL处理
        sourceMap: true
      }
    },
    {
      loader: 'resolve-url-loader',
      options: {
        attempts: 1,
        debug: true,
        sourceMap: true,
        // 删除冗余的root、publicPath配置
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true
      }
    },
  ]
},
// 静态资源处理规则修改
{
  test: /\.(ttf|woff|woff2|eot|jpe?g|png|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        publicPath: public_path, // 修正变量名
      },
    },
    'img-loader'
    // 移除冲突的url-loader，若需要使用请放在file-loader之前并配置fallback
  ]
}

修改完成后重新执行npm run stage即可实现CSS中静态资源URL自动加上staging环境前缀的需求。

内容的提问来源于stack exchange，提问作者Vladimír Paraska