Webpack5 Asset Module如何实现url-loader的postTransformPublicPath功能

解决方案 #

Webpack 5 Asset Module 原生提供了等价的配置能力，不需要额外插件，调整配置如下即可实现和原url-loader完全一致的效果：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  type: 'asset',
  // 等价原url-loader的limit配置：小于10kb的资源转为base64内嵌
  parser: {
    dataUrlCondition: {
      maxSize: 10 * 1024
    }
  },
  generator: {
    // 资源实际输出路径，保持输出到private/img目录，满足鉴权访问要求
    filename: 'private/img/[base][query]',
    // 等价原postTransformPublicPath能力：修改产物中引用的资源路径，去掉private前缀
    publicPath: (pathData) => {
      return pathData.filename.replace('private/', '')
    }
  }
}

配置说明 #

• parser.dataUrlCondition.maxSize：和原url-loader的limit参数作用完全一致，控制资源转base64的阈值
• generator.publicPath支持传入函数自定义处理公共路径，入参可以拿到资源的输出文件名等信息，可直接实现任意路径转换逻辑，无需额外适配。

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