Webpack & Build Tools

Что включает конфигурационный файл Webpack?

Webpack — статический бандлер, который собирает граф зависимостей и выдаёт оптимизированные файлы.

// webpack.config.js — полная структура с основными секциями
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
  // 1. MODE — режим сборки
  mode: 'production', // 'development' | 'production' | 'none'
 
  // 2. ENTRY — точки входа
  entry: {
    main: './src/index.tsx',
    // vendor: ['react', 'react-dom'], // отдельный чанк
  },
 
  // 3. OUTPUT — куда писать бандл
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js', // contenthash = инвалидация кэша
    clean: true, // очищает dist перед сборкой
    publicPath: '/',
  },
 
  // 4. MODULE — правила для трансформации файлов (лоадеры)
  module: {
    rules: [
      // TypeScript / JSX
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // CSS-модули
      {
        test: /\.module\.css$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true } }],
      },
      // Обычный CSS
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      // Изображения (встроенный asset module)
      {
        test: /\.(png|jpg|svg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
 
  // 5. PLUGINS — расширяют возможности (не лоадеры, работают глобально)
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  ],
 
  // 6. RESOLVE — как Webpack ищет модули
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
 
  // 7. OPTIMIZATION — разделение кода, минификация
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
    runtimeChunk: 'single', // отдельный чанк для runtime Webpack
  },
 
  // 8. DEV SERVER — локальный сервер разработки
  devServer: {
    port: 3000,
    hot: true,         // HMR — замена модулей без перезагрузки страницы
    historyApiFallback: true, // SPA — все пути → index.html
    open: true,
  },
 
  // 9. SOURCE MAPS — для дебага
  devtool: 'source-map', // 'eval-cheap-source-map' для dev (быстрее)
};

---

Лоадеры vs Плагины

Параметр	Лоадер (module.rules)	Плагин (plugins)
Что делает	Трансформирует файлы перед графом	Расширяет процесс сборки целиком
Уровень	Модуль (файл)	Глобальный (весь процесс сборки)
Примеры	ts-loader, css-loader	HtmlWebpackPlugin, DefinePlugin
Конфигурация	use: [...] в rules	new Plugin() в plugins: []

---

Как работает contenthash?

[contenthash] в имени файла — хэш от содержимого. Меняется только если изменился сам файл.

main.abc123.js    → изменился код компонента → main.xyz789.js (новый кэш)
vendors.def456.js → React не изменился      → vendors.def456.js (кэш жив)

Это позволяет браузеру кэшировать vendor-чанк надолго — пользователь не перезагружает React при каждом деплое.

---

Выбор сборщика для старого проекта на ванильном JS

esbuild

esbuild — это очень быстрый низкоуровневый инструмент (написан на Go) для бандлинга и транспиляции:

• Работает в разы быстрее Webpack/Rollup
• Поддерживает TypeScript, JSX, code splitting
• Минифицирует
• Не имеет HMR, слабая экосистема плагинов
• Хорошо подходит, если нужен просто быстрый production-билд без лишней магии

Vite

Vite — это более полноценный dev-tool, не просто bundler:

• В режиме разработки не бандлит проект — отдаёт файлы браузеру напрямую как ES Modules (браузер сам резолвит импорты). Это делает старт мгновенным.
• Использует esbuild внутри — для pre-bundling зависимостей (node_modules) и транспиляции
• В продакшн-сборке использует Rollup — более зрелый оптимизирующий bundler
• Встроенный HMR (Hot Module Replacement) — обновляет только изменённый модуль без перезагрузки страницы
• Богатая экосистема плагинов

npm create vite@latest my-project -- --template vanilla

Этой одной командой получаешь готовую инфраструктуру с dev-сервером, HMR и production-оптимизацией.

Задача	Выбор
Нужна быстрая production-сборка, без dev-сервера	esbuild
Нужен полноценный DX (dev-сервер, HMR, плагины)	Vite
Большой legacy-проект с нестандартными настройками	Webpack 5

Метафора: esbuild — это очень быстрый мотор. Vite — готовая машина, которая использует этот мотор + много других удобных вещей вокруг.

---

Jade / Pug — шаблонизатор для Node.js

Jade — старое название шаблонизатора Pug. После конфликта с авторскими правами переименован.

Pug — HTML-шаблонизатор для Node.js: минималистичный синтаксис с отступами вместо угловых скобок.

html
  head
    title= pageTitle
  body
    h1.heading Hello #{name}
    ul
      each item in items
        li= item

Применяется для серверного рендеринга в связке с Express.js.