@1thater

Как лучше настроить работу с картинками и шрифтами в WEBPACK?

Подскажите пожалуйста как настроить webpack:

Я хочу, чтобы css, html, использовали картинки и шрифты из файлов, которые я копирую через CopyWebpackPlugin, но из-за того что css использует картинки, (а css импортируется в js), то они прогоняются через url-loader и переводятся в BASE64, что повышает размер css в сотни раз.

(и это меня пугает, как я понимаю, эти файлы уже хранятся в css, поскольку base64 это строковое представление этих файлов, но насколько это хороший вариант)

Если использовать file-loader, то возникает следующая проблема:

{
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/image/[name].[ext]`,
            }
          },
        ],
      },
      {
        test: /\.(ttf|woff|woff2|eot|svg)/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/fonts/[name].[ext]`,
            },
          },
        ],
      },


Он не видит разницы между svg картинкой и svg шрифтом и выплевывает и то и то:

что в принципе может решаться путем добавления в названия файлов его тип (для шрифтов font на конец, а для картинок img) и сделать то же самое для регулярок. Но насколько это все правильное дело?

unknown.png
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ответы на вопрос 1
MorganDusty
@MorganDusty
Все так делают, думаю если вам лень париться над кодом то проще сделать определение как и все)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы