Блог

Я использую Webpack 4.x с FontAwesome 5 Pro и clean-webpack-plugin для очистки каталога dist при каждой сборке. Проблема, с которой я сталкиваюсь, заключается в том, что файлы webfonts (например, * woff и т.д.) Отсутствуют после первоначального запуска Webpack. Вот как это выглядит:

• запуск Webpack в режиме разработки с watch включенным

• все файлы css, js и шрифтов помещены в dist с хэшированными именами, я также вижу там файлы * woff

• Я вношу любые изменения в любой из просмотренных мной файлов js или css, чтобы запустить webpack-watch

• clean-webpack-plugin запускает и очищает dist каталог

• Webpack создает все заново, помещая все мои js-файлы js / css и Font Awesome css, dist но не файлы шрифтов, поэтому все *woff файлы полностью отсутствуют.

Мой импорт потрясающего шрифта выглядит следующим образом

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

all.css содержит ссылки на все файлы webfont, так почему Webpack не включает их в сборку?

У меня была точно такая же проблема (кроме использования font-awsome), и я смог исправить это, используя url-loader вместо file-loader, если для вас это вариант. Конечным результатом является то, что шрифты будут встроены через uri данных в css вместо создания файлов шрифтов в папке dist. Последствия этого хорошо объяснены здесь: https://www.zachleat.com/web/web-font-data-uris /

моя соответствующая конфигурация веб-пакета:

 rules: [
  // other rules...

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