WebPack Watch и шрифт Awesome: отсутствующие файлы WebFont -- webpack поле с участием font-awesome-5 пол Связанный проблема

Webpack watch and Font Awesome: missing webfont files


2
vote

проблема

русский

Я использую WebPack 4.x с Fontawesome 5 Pro и clean-webpack-plugin для очистки дистанционного каталога при каждой сборке. Проблема, которую я сталкиваюсь с тем, что файлы WebFonts (например, * WOFF, и т. Д.) отсутствуют после того, как начальный запущенный веб-пакет. Вот как это выглядит:

    .
  • Начальный WebPack в режиме разработки <код> watch включен

  • Все файлы css, js и шрифтов помещаются в <код> dist с хешированными именами, я также могу видеть * файлы woff там

  • Я делаю какие-либо изменения в любой из моих наблюдаемых файлов js или css для запуска webpack-watch

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

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

Мой шрифт Удивительный импорт выглядит так, как этот

<Код> import '@fortawesome/fontawesome-pro/css/all.css';

<Код> all.css имеет ссылки на все файлы WebFont, поэтому, почему WebPack не включает их в сборку?

Английский оригинал

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?

</div
     

Список ответов

2
 
vote
vote
Лучший ответ
 

У меня имел то же самое проблему (в сторону от использования font-awsome) и смогли это исправить, используя URL-погрузчик вместо файлового загрузчика, если это вариант для вас. Конечный результат заключается в том, что он будет встроен на шрифты через URI данных в CSS вместо создания файлов шрифтов в папке Dist. Здесь хорошо объяснены последствия этого: https: //www.zachleat .com / web / web-font-data-riis /

Мой соответствующий веб-папак Config:

 <код> rules: [   // other rules...    // font rule   {     test: /.(woff|woff2|eot|ttf|otf)$/,     loader: 'url-loader?limit=100000',   } ]   
 

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

Связанный проблема

0  Настройте HTTPS для localhost, чтобы получить доступ к микрофону на телефоне через USB  ( Configure https for localhost to gain access to microphone on phone via usb ) 
Я устанавливаю свою среду dev, используя Это шаблон . Моя цель состоит в том, чтобы получить доступ к микрофону, поэтому я могу начать разрабатывать небольшо...

12  Что значит "/*! Ни один статический экспорт не найден * / "в сгенерированном коде WebPack 4 означает?  ( What does no static exports found in the generated webpack 4 code mean ) 
WebPack4 часто генерирует модули, начиная с комментариев <код> /*! no static exports found */ . Это предупреждение и / или что это на самом деле значит? ...

5  Консолидирующие пакеты в WebPack 2 с System.import  ( Consolidating bundles in webpack 2 with system import ) 
в WebPack 1, мы делаем импорт для разделения кода с <код> require.ensure , который может принимать массив модулей. Эти модули объединяются в одно расслоение и...

34  Как сделать веб-работники с помощью TypeyScript и WebPack  ( How to make web workers with typescript and webpack ) 
У меня есть некоторые проблемы с должным образом составлением моего Teepercript, когда я пытаюсь использовать веб-работники. У меня есть рабочий, как это, к...

9  Отладка в Devtools с WebPack  ( Debugging in devtools with webpack ) 
с помощью require.js было очень легко отладить модуль в devtools chrome, просто введя: <код> require('my-module').callThisFunction() С помощью WebPack э...

0  Реагниальный маршрутизатор: компонент, не визущий после входа в систему  ( React router component not rendering after login ) 
Я строю веб-сайт, используя RECT, и я пытаюсь перенаправить пользователя на страницу индекса после входа в систему, но мой компонент ничего не решает, хотя я ...

0  WebPack Hot Marmware Не горячая перезагрузка на Ubuntu с реагированием?  ( Webpack hot middleware not hot reloading on ubuntu with react ) 
Я столкнулся с очень расстраивающей проблемой, где мой WebPack-Hot-Mardware не «горячая перезагрузка». Он создает проект и восстанавливает проект всякий раз, ...

1  Как получить отношения между активом и модулем при использовании загрузчика пучка  ( How to get relationship between asset and module while using bundle loader ) 
<код> require(`bundle!./components/${name}`) Bundle Loader будет генерировать файлы в моих компонентах dir, Вывод WebPack Моя программа требует одной ...

0  Неожиданное имя токена «I», ожидаемое Punc «;» [./~/UUID/dist/bytesto uuid.js: 14,0]  ( Unexpected token name i expected punc uuid dist bytesto uuid js14 0 ) 
<Сильная> Ошибка NPM Run Build дает ниже ошибки в Rection <код> static/js/main.18b04f97.js from UglifyJs //could not find Uuid.js file ===============...

2  Создание электронного приложения с Vuejs, WebPack и Tailwindcss  ( Creating an electron app with vuejs webpack and tailwindcss ) 
Я стараюсь получить электронное приложение, работающее с WebPack , Vuejs и Tailwindcsssss , начиная с Электронный веб-папак шаблон пакет и добавление Vu...

2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2  ( Error message in monaca debug mode with onsen ui angular 2 ) 
У меня есть ошибки шаблона разбора в отладчике Monaca. При использовании monaca preview он работает в браузере без каких-либо проблем, но когда я использую ...

8  В чем разница между WebPack-Merge и Object.Assign ()?  ( What is the difference between webpack merge and object assign ) 
Я работаю с WebPack и, наконец, я не вижу возможности этого пакета, поскольку кажется, что объект. Сделать работу, но, возможно, есть что-то между линиями об ...

3  Веб-папак Горячий модуль Перезагрузка не работает  ( Webpack hot module reloading not working ) 
Я разрабатываю приложение React, используя Reloading WebPack и Hot модуль. Раньше он работал просто хорошо, но несколько месяцев назад он перестал работать, и...

0  ReactJS версия 15.6.2: Целевой контейнер не является элементом DOM  ( Reactjs version 15 6 2 target container is not a dom element ) 
Я сталкиваюсь с ошибкой, и мне не повезло в разрешении то же самое. Я прошел много ответов на тот же вопрос в переполнении стека, но никто из них не помогает ...

15  Выставление плагина jQuery с WebPack  ( Exposing jquery plugin with webpack ) 
Я пытаюсь использовать bootstrap-daterangePicker с Webpack. В файле моего просмотра у меня есть следующее: <код> define(function (require) { require('...

Связанный проблема

0  Настройте HTTPS для localhost, чтобы получить доступ к микрофону на телефоне через USB 
12  Что значит "/*! Ни один статический экспорт не найден * / "в сгенерированном коде WebPack 4 означает? 
5  Консолидирующие пакеты в WebPack 2 с System.import 
34  Как сделать веб-работники с помощью TypeyScript и WebPack 
9  Отладка в Devtools с WebPack 
0  Реагниальный маршрутизатор: компонент, не визущий после входа в систему 
0  WebPack Hot Marmware Не горячая перезагрузка на Ubuntu с реагированием? 
1  Как получить отношения между активом и модулем при использовании загрузчика пучка 
0  Неожиданное имя токена «I», ожидаемое Punc «;» [./~/UUID/dist/bytesto uuid.js: 14,0] 
2  Создание электронного приложения с Vuejs, WebPack и Tailwindcss 
2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2 
8  В чем разница между WebPack-Merge и Object.Assign ()? 
3  Веб-папак Горячий модуль Перезагрузка не работает 
0  ReactJS версия 15.6.2: Целевой контейнер не является элементом DOM 
15  Выставление плагина jQuery с WebPack 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.