Webpack 5使用asset/resource时如何实现类似file-loader的context路径裁剪效果？

方案1：直接使用rule层级的context配置（和webpack4用法一致） #

Webpack 5的模块规则原生支持context配置项，作用和file-loader的context完全相同，用于指定[path]占位符的相对根路径，配置如下：

{
  test: /\.php$/,
  type: "asset/resource",
  context: "views/src", // 此处设置路径根目录
  generator: {
    filename: "[path][name][ext]",
  },
}

设置后[path]会从views/src目录开始计算，原输出路径views/src/views/client会自动裁剪为views/client，完全符合需求。

方案2：使用自定义filename函数（适合复杂裁剪场景） #

如果有更灵活的路径处理需求，可以把filename设置为函数，自行处理路径字符串：

{
  test: /\.php$/,
  type: "asset/resource",
  generator: {
    filename: (pathData) => {
      // 正则替换掉路径开头的views/src/前缀
      return pathData.filename.replace(/^views\/src\//, '');
    },
  },
}

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