Webpack watch and Font Awesome: missing webfont files

Question

I am using Webpack 4.x with FontAwesome 5 Pro and clean-webpack-plugin to clean a dist directory upon every build. The issue that I am facing is that webfonts files (like *woff, etc) are missing after the initial Webpack run. Here is how it looks like:

• starting Webpack in dev mode with watch enabled

• all css, js and font files are placed into dist with hashed names, I can also see *woff files there

• I make any change to any of my watched js or css files to trigger webpack-watch

• clean-webpack-plugin starts and cleans the dist directory

• Webpack builds everything again, placing all my js/css and Font Awesome css js files into dist but not the font files, so all *woff files are completely missing.

My Font Awesome import looks like this

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

all.css has references to all webfont files, so why Webpack does not include them into the build?

Answer 1

I had the exact same issue (aside from using font-awsome) and was able to fix this by using url-loader instead of file-loader, if that's an option for you. The end result is that it will inline the fonts via data uri in the css instead of creating font files in the dist folder. The implications of doing so are well explained here: https://www.zachleat.com/web/web-font-data-uris/

my relevant webpack config:

rules: [
  // other rules...

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