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

我试图将一些字体包含在一个组件库中,我将它作为使用Webpack生成的UMD包分发并作为NPM模块安装;组件使用这些字体.问题是指向生成的包中的字体的URL不正确,并且在运行使用该库的应用程序时导致404s.

例如,resolve-url-loader将输出“/myfont.woff”的URL.但是,当然,该文件实际上并不在应用程序中的该URL处可用,除非使用它的应用程序执行某些配置来复制该文件并在预期路径上提供该文件.

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

对于大文件,我不想使用url-loader和Base 64编码它们,我不能使用CDN.

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

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

在他们的webpack.config.js和你的代码中导入的.css文件中,他们将能够通过自动将资产转移到他们的输出公共目录来使用资产(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;
}