Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Задачи

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

AI info

Карта сайта

Документы

Медиа

Назад
Вопрос про Webpack: fonts, loaders

Как настроить Webpack для обработки шрифтов?

Этот вопрос проверяет понимание работы Webpack с шрифтами и умения настраивать правила для их загрузки и оптимизации.

Короткий ответ

Webpack может обрабатывать шрифты через asset modules или загрузчики, такие как file-loader. Это позволяет копировать файлы шрифтов в папку сборки или встраивать их как base64, если они небольшие.

Длинный ответ

Для работы со шрифтами в Webpack используется asset/resource или дополнительные загрузчики, такие как file-loader.

 

Пример конфигурации с использованием asset/resource:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource', // Копирует шрифты в папку сборки
      },
    ],
  },
};

Если используется устаревший file-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash].[ext]', // Сохраняет шрифты в отдельной папке
            },
          },
        ],
      },
    ],
  },
};

Такой подход обеспечивает правильное подключение шрифтов, что важно для стилизации и производительности приложения.

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

  • Рейтинг:

    4

  • Сложность:

    6

Навыки

  • Webpack

    Webpack

Ключевые слова

#fonts

#loaders

Подпишись на React Developer в телеграм

Frontend developer

tech
tech
tech
tech
tech
tech
tech
tech
tech

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию