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

Question

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

例如,resolve-url-loader将输出一个URL "/myfont.woff".但是,当然,该文件实际上并不在应用程序中的该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文件中,他们可以通过自动将资产转移到输出公共目录来使用资产(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;
}