Расскажи о системе сборки проектов в контексте Frontend-разработки.

Система сборки автоматизирует процессы подготовки исходного кода к развертыванию в продакшене или к локальной разработке. Это включает транспиляцию JavaScript (например, из ES6 в ES5), компиляцию CSS препроцессоров (LESS, SASS), минификацию, оптимизацию изображений, бандлинг модулей, ассетов и другие задачи.

Основные цели использования систем сборки:

• Оптимизация: Уменьшение размера файлов (минификация, сжатие) и количества HTTP-запросов (бандлинг).
• Совместимость: Транспиляция кода для поддержки старых браузеров.
• Удобство разработки: Горячая перезагрузка, автопрефиксы для SASS/LESS, линтинг.
• Автоматизация: Исключение рутинных операций.

Примеры популярных систем сборки:

• Webpack: Модульный бандлер, собирает зависимости проекта в статические ассеты. Широко распространен благодаря гибкости и большому количеству плагинов.
• Parcel: Ориентирован на скорость и простую настройку ("zero configuration"). Подходит для небольших проектов или быстрого прототипирования.
• Vite: Новая система сборки, использующая нативные ES-модули во время разработки, что значительно ускоряет старт сервера и горячую перезагрузку. Требует бандлер (обычно Rollup) для продакшена.
• Rollup: Оптимизирован для сборки библиотек и фреймворков, активно использует tree-shaking.

Основные компоненты систем сборки (на примере Webpack):

• Entry: Точка входа в приложение, с которой Webpack начинает строить граф зависимостей.
• Output: Настройка, куда и с каким именем будут сохраняться собранные файлы.
• Loaders: Обрабатывают файлы различных типов (CSS, изображения, шрифты) и преобразуют их в модули, которые Webpack может обработать. Например, babel-loader для JavaScript, css-loader для CSS.
• Plugins: Выполняют более широкие задачи, такие как оптимизация бандла (минификация), управление ассетами (HtmlWebpackPlugin), настройка переменных окружения.

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

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Точка входа
  output: {
    filename: 'bundle.js', // Имя выходного файла
    path: path.resolve(__dirname, 'dist'), // Папка для собранных файлов
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Применяем правило к .js файлам
        exclude: /node_modules/, // Исключаем node_modules
        use: {
          loader: 'babel-loader', // Используем babel-loader
          options: {
            presets: ['@babel/preset-env'], // Настраиваем Babel
          },
        },
      },
      {
        test: /\.css$/, // Применяем правило к .css файлам
        use: ['style-loader', 'css-loader'], // Используем style-loader и css-loader
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ // Плагин для генерации HTML
      template: './src/index.html', // Используем этот шаблон
    }),
  ],
};

Системы сборки являются неотъемлемой частью современной фронтенд-разработки, повышая эффективность и качество кода.