Зачем нужен сборщик

Сборщик (например, Webpack, Vite) объединяет, оптимизирует и преобразует исходные файлы (JS, CSS, изображения) в готовые для продакшена.

Основные задачи:

• Бандлинг – объединяет модули в один/несколько файлов.
• Транспиляция – конвертирует современный JS (ES6+) в старый для совместимости (Babel).
• Оптимизация – минификация, tree-shaking (удаление неиспользуемого кода).
• Загрузка ресурсов – обработка CSS, изображений, шрифтов.

Пример Webpack:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

Без сборщика пришлось бы вручную управлять зависимостями и оптимизациями.