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

Question

[igoryusha22]

Подскажите пожалуйста как настроить 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) и сделать то же самое для регулярок. Но насколько это все правильное дело?

Answer 1

[MorganDusty]

Все так делают, думаю если вам лень париться над кодом то проще сделать определение как и все)

Comments

[igoryusha22]

не совсем понял о чем вы.

[MorganDusty]

1thater, добавляют в название фала ключевые теги "img, svg, png, logo" и т.д