Webpack watch 和 Font Awesome：缺少 webfont 文件答案

【问题标题】：Webpack watch and Font Awesome: missing webfont filesWebpack watch 和 Font Awesome：缺少 webfont 文件
【发布时间】：2019-03-13 12:18:33
【问题描述】：

我使用 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 不将它们包含在构建中呢？

【问题讨论】：

标签： webpack font-awesome-5

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

【讨论】：