Какие файлы можно импортировать

React-приложения, собранные с помощью Webpack или Vite, поддерживают импорт различных типов файлов напрямую в JavaScript- или TypeScript-код. Сборщик автоматически обрабатывает такие импорты: копирует файлы в папку сборки, генерирует корректные пути и, при необходимости, преобразует содержимое. Это позволяет работать с ресурсами как с модулями, обеспечивая предсказуемость и контроль над зависимостями.

Поддерживаемые типы файлов

Сборщики по умолчанию распознают и обрабатывают следующие форматы:

  • Изображения: .png, .jpg, .jpeg, .gif, .webp
  • SVG: как изображение или как React-компонент
  • Шрифты: .woff, .woff2, .ttf
  • Аудио и видео: .mp3, .wav, .ogg, .mp4, .webm
  • JSON: .json
  • Переменные окружения: .env (не импортируются напрямую, но доступны через process.env)

Каждый тип имеет свои особенности использования, которые подробно описаны на отдельных подстраницах: