1. Что такое Webpack

Webpack — это статический сборщик модулей для JavaScript-приложений. В отличие от старых инструментов вроде Grunt и Gulp, которые выполняли задачи последовательно, Webpack строит граф зависимостей вашего приложения и оптимально упаковывает всё в бандлы.

Историческая справка

До Webpack JavaScript-разработчики сталкивались с серьёзными проблемами:

• Управление порядком <script> тегов в HTML вручную
• Глобальные переменные и конфликты имён
• Невозможность использовать require/import в браузере
• Ручная конкатенация файлов для оптимизации

Webpack решил все эти проблемы, введя концепцию модульной системы для браузера.

Граф зависимостей (Dependency Graph)

Когда Webpack обрабатывает ваш проект, он начинает с точки входа (entry point) и рекурсивно строит граф всех зависимостей:

// index.js (entry)
import App from './App';      // → App.js → Button.js, Header.js
import './styles.css';         // → styles.css → variables.css
import logo from './logo.svg'; // → logo.svg (asset)

Webpack “видит” весь этот граф и принимает оптимальные решения о бандлинге:

• Какие модули объединить в один бандл
• Какие вынести в отдельные чанки (code splitting)
• Какие оставить как есть (external)

Pipeline обработки: Entry → Loader → Plugin → Output

┌─────────┐    ┌──────────────────────────────────┐    ┌────────┐
│  Entry  │───▶│  Dependency Graph Resolution     │───▶│        │
└─────────┘    │  ┌─────────────────────────────┐ │    │        │
               │  │  Module Processing           │ │    │ Output │
               │  │  TS → Babel → JS             │ │    │        │
               │  │  SCSS → PostCSS → CSS        │ │    │ dist/  │
               │  │  PNG → base64/file           │ │    │        │
               │  └─────────────────────────────┘ │    │        │
               │  ┌─────────────────────────────┐ │    │        │
               │  │  Plugin Hooks                │ │    │        │
               │  │  HtmlWebpackPlugin           │ │    │        │
               │  │  MiniCssExtractPlugin        │ │    │        │
               │  └─────────────────────────────┘ │    │        │
               └──────────────────────────────────┘    └────────┘

Основные концепции

Mode

module.exports = {
  mode: 'development', // 'production' | 'none'
};

• development: быстрая сборка, source maps, удобный debug
• production: минификация, tree shaking, оптимизация

Module System Support

Webpack понимает все форматы модулей:

• ESM: import / export
• CommonJS: require() / module.exports
• AMD: define() / require()
• Assets: CSS, изображения, шрифты

Resolve

Webpack умеет разрешать пути:

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
}

Жизненный цикл сборки

1. Initialization — загрузка конфига, создание компилятора
2. Make — обход графа зависимостей, применение лоадеров
3. Seal — оптимизация, разбивка на чанки
4. Emit — запись файлов в output.path
5. Done — финальные хуки, вывод статистики

Ниже — интерактивная визуализация графа зависимостей. Нажимайте на узлы чтобы исследовать связи.