无法使用文件加载器和 webpack v2 加载字体答案

【问题标题】：Can't load fonts with file-loader and webpack v2无法使用文件加载器和 webpack v2 加载字体
【发布时间】：2017-06-02 04:58:42
【问题描述】：

我在使用 webpack v2 和文件加载器加载字体时遇到问题。对任何字体文件使用 url-loader 一切正常。但是，我想使用文件加载器，以便我们可以缓存字体文件，而不是将所有图像和字体存储在捆绑的 js 文件中。

我正在使用 webpack v2、css-modules 和 postcss（和 postcss-loader）。

为了让事情变得简单，我在 global.pcss 样式表中定义了@font-face，它包含在我的主 index.jsx 文件中。（这是调试此问题时的临时措施。通常所有@font-face 声明都在单独的文件中）

@font-face {
  font-family: 'ProximaNova-Rg';
  src: './ProximaNova-Rg';
  font-weight: normal;
  font-style: normlal;
}

:global html {
  font-family: 'ProximaNova-Rg', Comic Sans Ms;
}

在我的 index.jsx 文件中，它是 webpack 的应用程序入口点，我导入了 global.pcss 文件

import './global/global.pcss'

global.pcss 文件中的所有其他样式都已正确应用。

我的 webpack 配置看起来像这样的字体

{
  test: /\.(otf|eot|ttf|woff2?)(\?\S*)?$/,
  use: 'file-loader?name=fonts/[name]-[hash].[ext],
}

如果我将上面的文件加载器换成 url-loader 字体加载正确。使用文件加载器，当我构建项目时，我可以确认文件加载器创建了正确命名的字体文件并将其移动到我的 dist 文件夹，但我的项目加载的是漫画 sans 而不是 Proxima Nova，eww。

我不知道如何进行调试。任何帮助将不胜感激。

【问题讨论】：

标签： webpack webpack-2 urlloader webpack-file-loader

【解决方案1】：

所以我弄清楚这里发生了什么。将资产（字体/图像）导入样式表并在样式加载器中启用源映射时，问题似乎是文件加载器 + 样式加载器。

styleloader 存在一个已知错误，您不能在启用 sourceMaps 的 webpack 配置中使用相对 publicPath，而必须使用绝对路径 [参见 webpack/style-loader issue #55]。

所以 TL;DR 为了解决这个问题，我将 webpack 输出中的 publicPath 从“/”更改为“http://0.0.0.0:8080/”。

【讨论】：