reactjs - 如何使用 Webpack 构建的 React 组件库分发字体或其他静态资源？

Question

我正在尝试在组件库中包含一些字体，我将这些字体作为使用 Webpack 生成的 UMD bundle 进行分发，并作为 NPM 模块安装；组件使用这些字体。问题在于，指向生成的 bundle 中的字体的 URL 不正确，并且在运行使用该库的应用程序时会导致 404 错误。

例如，resolve-url-loader 将输出 "/myfont.woff" 的 URL。当然，除非使用该文件的应用程序进行一些配置来复制该文件并在预期路径上提供该文件，否则该文件实际上在应用程序中的该 URL 上并不可用。

当应用程序从我的库导入组件时，有没有办法自动使这些字体可用(即 font-face: 'My Font' 将起作用)，最大限度地减少字体数量使用它的应用程序需要配置？

对于大文件，我不想使用 url-loader 和 Base 64 编码它们，而且我无法使用 CDN。

Answer 1

我认为最简单的方法是提供一个 .css 文件，其中通过相对 url(...) 语句使用您的资源。然后，有类似的东西

...
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},
{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpg)$/,
  use: ['file-loader'],
},
...

在他们的 webpack.config.js 和在代码中导入的 .css 文件中，他们将能够通过自动将 Assets 传输到其输出公共(public)目录来使用 Assets (URL 也应该自动在结果 CSS 包中进行调整)。

例如，您可以查看 Onsen UI库，它提供通过这些文件嵌入其资源和样式:

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

以下是他们如何通过相对 URL 使用字体的示例:

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}