从使用postTransformPublicPath的file-loader迁移到Asset Modules方案咨询

Webpack 5 的 Asset Modules 原生支持和file-loader的postTransformPublicPath等效的动态路径拼接能力，你可以根据需求选择以下两种配置方案：

全局生效配置 #

如果所有资源都需要依赖__webpack_public_path__动态拼接路径，直接修改output配置即可：

module.exports = {
  output: {
    // 原有output配置保留
    publicPath: '',
    assetModuleFilename: '[contenthash][ext][query]' // 可替换为你原有file-loader的命名规则
  }
}

该配置下所有资源的引入路径会自动生成__webpack_public_path__ + 资源相对路径的格式，和你之前的配置效果完全一致。

指定规则生效配置 #

如果只需要给特定类型的资源开启动态路径拼接，在对应module.rules的generator字段单独配置即可：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|svg|woff2?)$/i, // 替换为你需要匹配的资源后缀
        type: 'asset/resource',
        generator: {
          publicPath: 'auto',
          filename: '[name].[contenthash][ext][query]' // 对应资源的命名规则
        }
      }
    ]
  }
}

如果需要自定义路径拼接逻辑，Webpack 5.28.0及以上版本支持传入函数形式的publicPath：

generator: {
  publicPath: (pathData) => `__webpack_public_path__ + ${pathData.filename}`,
  filename: '[contenthash][ext][query]'
}

配置校验 #

如果配置后路径不符合预期，优先检查两点：

• __webpack_public_path__的赋值逻辑要放在入口文件的最顶部，早于所有资源引入语句执行
• 多入口项目建议将__webpack_public_path__赋值逻辑抽为单独模块，在每个入口文件第一行引入

内容的提问来源于stack exchange，提问作者Matt - sanemat