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 不将它们包含到构建中？

Answer 1

我有完全相同的问题（除了使用 font-awsome 之外）并且能够通过使用 url-loader 而不是 file-loader 来解决这个问题，如果那是你的选择。最终结果是它将通过 css 中的数据 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',
  }
]

Webpack watch 和 Font Awesome：缺少 webfont 文件

Webpack watch and Font Awesome: missing webfont files

webpack

font-awesome-5