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

【问题标题】：How to distribute fonts or other static assets with a React component library built using Webpack?如何使用 Webpack 构建的 React 组件库分发字体或其他静态资产？
【发布时间】：2017-11-06 21:49:25
【问题描述】：

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

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

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

对于大文件，我不想使用url-loader 和 Base 64 编码，我不能使用 CDN。

【问题讨论】：

你必须使用 CSS 吗？你可以使用 Sass 并让你的用户在他们的配置中包含你的 Sass 文件吗？

标签： reactjs webpack webpack-file-loader

【解决方案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;
}

【讨论】：

这可行，但如果用户从 JS 导入 CSS 文件，css-loader 仍会尝试解析 .woff 文件，因此他们需要将 file-loader 添加到他们的 Webpack 配置中那个文件。
他们还可以将css-loader 的url 解析设置为false，或者在HTML 中仅使用<link> 标记导入CSS。但随后他们需要添加一些东西来将所需的文件从node_modules/my_library 复制到它们将被服务的地方，也许是CopyWebpackPlugin。我想知道是否有任何方法可以进一步减少用户所需的配置步骤。

【解决方案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]' },

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

import from ./assets/fonts/abc.css

但请确保您已设置 webpack css 加载器

【讨论】：