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

Question

我正在尝试将一些字体包含在组件库中，我将把它们作为使用 Webpack 生成的 UMD 包分发并作为 NPM 模块安装；组件使用这些字体。问题是指向生成包中字体的 URLs 不正确，当使用该库的应用程序是运行.

时会导致 404s

例如，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 文件中，他们将能够通过自动将资产转移到他们的输出 public 目录（URL 应该也会在结果 CSS bundle 中自动调整。

例如，您可以查看 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;
}

Answer 2

您需要一些装载机来完成这项任务。为了解决大文件大小问题，我使用了文件加载器。

      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?name=assests/fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?mimetype=application/font-woff&name=assests/fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream&name=assests/fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=assests/fonts/[name].[ext]' },
      { test: /\.(jpe?g|png|gif|ico)$/i, loader: 'file-loader?name=assests/images/[name].[ext]' },

最后使用导入语句导入字体的css个文件

import from ./assets/fonts/abc.css

但请确保您有 webpack css 加载程序设置

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

How to distribute fonts or other static assets with a React component library built using Webpack?

reactjs

webpack

webpack-file-loader