具有动态公共路径的Webpack文件加载器

Question

我正在使用webpack和文件加载器将import/require()解析为URL。问题是我需要一种机制，在运行时使用注入浏览器的方法来更改该url。因此，在运行时，我有一个类似window.changeAssetPath(existingPath)的方法，需要为传递给用户的每个静态文件执行该方法。我检查了文件加载器的配置，发现有一个名为postTransformPublicPath的设置。所以我试图这样使用它：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        loader: 'file-loader',
        options: {
          postTransformPublicPath: (p) => { return window.changeAssetPath(p) },
        },
      },
    ],
  },
};

但是window在webpack构建期间未定义，因此构建失败。您知道我的问题的解决方案吗？

Answer 1

解决方案是对函数调用进行字符串化处理。所以这应该工作：

{
    test: /\.(png|jpg|gif)$/i,
    loader: 'file-loader',
    options: {
      postTransformPublicPath: (p) => { return "window.changeAssetPath(" + p + ")" },
    }
}