Как сборщик помогает при разработке

Сборщик (например, Webpack, Vite, Parcel) автоматизирует рутинные задачи и оптимизирует код для продакшена. Основные преимущества:

1. Бандлинг – объединяет модули в один/несколько файлов
2. Транспиляция – конвертирует современный JS (ES6+) в совместимый код через Babel
3. Оптимизация – минификация, tree-shaking, сжатие изображений
4. Dev-сервер – горячая перезагрузка (HMR), проксирование API
5. Обработка ресурсов – импорт CSS/SCSS, шрифтов как модулей

Пример конфига Webpack:

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