В чем может помочь сборщик кроме оптимизации доставки кода

«В чем может помочь сборщик кроме оптимизации доставки кода» — вопрос из категории Devops, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Сборщик (например, Webpack, Vite) решает множество задач:

  1. Транспиляция – конвертирует современный JS (ES6+) в код, понятный старым браузерам (Babel).
  2. Объединение модулей – разрешает зависимости между файлами (import/export).
  3. Обработка ресурсов – преобразует SCSS/LESS в CSS, оптимизирует изображения, подключает шрифты.
  4. Dev-сервер – горячая перезагрузка (HMR), проксирование API.
  5. Разделение кода – ленивая загрузка (dynamic imports).
  6. Генерация HTML – автоматическое подключение скриптов (HtmlWebpackPlugin).

Пример настройки загрузчика в Webpack:

module: {
  rules: [
    {
      test: /.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}