Как работает WebPack

Webpack — это модульный сборщик для JavaScript-приложений. Он анализирует зависимости между модулями (JS, CSS, изображения и др.), создает граф зависимостей и собирает их в один или несколько бандлов (оптимизированных файлов).

Основные этапы работы:

1. Entry Point — указывает главный файл, с которого начинается сборка.
2. Loaders — преобразуют файлы (например, Babel для JS, Sass-loader для CSS).
3. Plugins — расширяют функционал (минификация, копирование файлов и т. д.).
4. Output — определяет, куда и как сохранять бандл.

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

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

Webpack поддерживает Hot Module Replacement (HMR) для обновления кода без перезагрузки страницы.