webpack - Webpack watch 和 Font Awesome：缺少 webfont 文件

Question

我将 Webpack 4.x 与 FontAwesome 5 Pro 一起使用，并clean-webpack-plugin在每次构建时清理 dist 目录。我面临的问题是在初始 Webpack 运行后缺少 webfonts 文件（如 *woff 等）。这是它的样子：

• watch在启用的开发模式下启动 Webpack

• 所有 css、js 和字体文件都使用散列名称放入dist，我还可以在那里看到 *woff 文件

• 我对我观看的任何 js 或 css 文件进行任何更改以触发 webpack-watch

• clean-webpack-plugin启动并清理dist目录

• Webpack 再次构建所有内容，将我所有的 js/css 和 Font Awesome css js 文件放入dist但不放入字体文件，因此所有*woff文件都完全丢失了。

我的 Font Awesome 导入看起来像这样

import '@fortawesome/fontawesome-pro/css/all.css';

all.css有对所有 webfont 文件的引用，那么为什么 Webpack 不将它们包含在构建中呢？

标签： webpackfont-awesome-5

Answer 1

我遇到了完全相同的问题（除了使用 font-awsome 之外），并且能够通过使用 url-loader 而不是 file-loader 来解决这个问题，如果这是你的选择的话。最终结果是它将通过 css 中的 data uri 内联字体，而不是在 dist 文件夹中创建字体文件。这样做的含义在这里得到了很好的解释：https ://www.zachleat.com/web/web-font-data-uris/

我的相关 webpack 配置：

rules: [
  // other rules...

  // font rule
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: 'url-loader?limit=100000',
  }
]