Webpack监视和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文件都完全丢失了。

“我的真棒字体”导入看起来像这样

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