Webpack url-loader 动态公共(public)路径

Question

我正在使用 webpack 的 url-loader 插件并将其配置如下:

module.exports = {
    entry: './src/admin.planningview.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://poc.local/dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    }
};

在我的 base.css 中有以下行:

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-regular-webfont.woff') format('woff'), url('fonts/opensans-regular-webfont.ttf') format('truetype'), url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

此文件位于子文件夹“fonts”中。

我的 dist 文件夹如下所示:

现在我尝试根据 block 和 Assets 的动态 publicPath 变量(因此覆盖 http://poc.local/dist/ url)加载所有这些文件。

我添加了这是我的入口点文件:

__webpack_public_path__ = window.cdnURL;

window.cdnURL 包含类似以下内容:http://cdn.local/dist/

现在我的问题是 block 已正确加载，但字体/woff 文件未正确加载。我认为这似乎是 url-loader 的问题。

当我在 Debug模式下检查bundle.js 时，我看到以下内容，它是旧的 URL:

有什么想法吗？

Answer 1

据我了解，file-loader(url-loader的后备)将在构建时对路径进行字符串化。

为了使用动态数据，您需要使用postTransformPublicPath :

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: '/some/path/',
          // add the following. This could remove/replace "http://poc.local/dist/"
          // you would have to write JS code as a string.
          postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
        },
      },
    ],
  },
};