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：

任何想法？

- Tim Ververs

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}`,
        },
      },
    ],
  },
};

- Maddis

Answer 2

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

- torahmike

---

不再支持。他们建议使用webpack resolve.alias代替。 - Mosh Feu

@Mosh-feu 在哪里声明它不受支持？ - torahmike