Webpack url-loader动态公共路径

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文件夹如下所示：

现在我正在尝试基于动态的publicPath变量（因此覆盖http://poc.local/dist/ url）为块和资产加载所有这些文件。

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

__webpack_public_path__ = window.cdnURL;

window.cdnURL包含类似：http://cdn.local/dist/

的内容

现在我的问题是正在正确加载块但是字体/ woff文件不是..这似乎与我认为的url-loader有关。

当我在调试模式下检查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}`,
        },
      },
    ],
  },
};

Answer 2

使用css-loader别名选项： https://github.com/webpack-contrib/css-loader#alias