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;
}

该文件位于子文件夹“字体”中。

我的 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

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