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

Question

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

例如，“resolve-url-loader”将输出一个URL“/myfont.woff”。但是，除非使用它的应用程序进行一些配置来复制该文件并将其服务于预期路径，否则该文件实际上不可用于该URL。

是否有一种方法可以自动使这些字体可用（即，“font-face：'My Font'”将起作用），当一个应用程序从我的库中导入一个组件时，最小化使用它的应用程序所需的配置量？

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

- xli

---

你必须使用CSS吗？你能用Sass，让用户在其配置中包含你的Sass文件吗？ - Robert Fischer

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;
}

- Dmitry Druganov

---

这个代码可以工作，但是如果用户从JS导入CSS文件，css-loader仍然会尝试解析.woff文件，因此他们需要将file-loader添加到他们的Webpack配置中来处理该文件。 - xli

他们还可以将 css-loader 的 URL 解析设置为 false，或者在 HTML 中只使用 <link> 标签导入 CSS。但是，然后他们需要添加一些内容来将所需的文件从 node_modules/my_library 复制到它们将被提供的位置，可能需要使用 CopyWebpackPlugin。我想知道是否有任何方法进一步减少用户所需的配置步骤。 - xli

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]' },

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

import from ./assets/fonts/abc.css

但要确保您已设置了webpack CSS加载器。

- hannad rehman