Какие проблемы Frontend решает сборщик кроме склеивания файлов в один

Сборщики (Webpack, Vite, Rollup) решают несколько ключевых задач:

1. Оптимизация – минификация, tree-shaking, сжатие изображений, разделение кода (code splitting)
2. Транспиляция – конвертация modern JS (ES6+) в совместимый код (Babel), обработка TypeScript
3. Обработка стилей – автопрефиксы, SCSS/LESS в CSS, извлечение CSS в отдельные файлы
4. Dev-инструменты – hot module replacement, source maps, dev server с проксированием
5. Ассеты – обработка изображений (webp), шрифтов, svg-спрайтов

Пример настройки оптимизации в Webpack:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all' // Разделение vendor и app кода
    },
    minimize: true // Включение минификации
  }
}