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

Question

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

YeaHub · Accepted Answer

Для работы со шрифтами в 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]', // Сохраняет шрифты в отдельной папке
           			},
          		},
        		],
      		},
    		],
  	},
};Такой подход обеспечивает правильное подключение шрифтов, что важно для стилизации и производительности приложения.