Шаг 4. Отделение шрифтов после сборки

Теперь нужно вынести шрифты в отдельную директорию. Логика обработки шрифтов точно такая же, как с изображениями. То есть мы берём расширения используемых шрифтов woff1, woff1, eot, ttf, otf и обрабатываем их следующей записью:

{
  test: /\.(woff2?|eot|ttf|otf)$/i,
  type: 'asset',
  generator: {
    filename: 'assets/fonts/[name][hash][ext]',
  },
}

В поле test мы в формате регулярного выражения указываем расширения шрифтов. Запись woff2? — сокращённая от woff1 | woff2. Далее мы говорим webpack, куда положить шрифты после сборки приложения.

Установленный по умолчанию размер в 8 КБ мы можем менять по своему усмотрению, используя запись:

    {
      test: /\.(woff2?|eot|ttf|otf)$/i,
      type: 'asset',
      generator: {
        filename: 'assets/img/[name][hash][ext]',
      },
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024,
        },
      },
    },

У нас получилось следующее: если размер исходного кода модуля меньше maxSize (заданного размера), то модуль будет внедрён в пакет в виде строки в кодировке Base64. В противном случае файл модуля отправится в выходной каталог, где будет размещён в отведённую ему директорию.