Как сотни модулей, npm-пакеты, CSS, TypeScript и картинки доходят до браузера? Это решает сборщик (bundler): он идёт от входного файла по всему проекту и собирает его в несколько готовых для браузера файлов.

Работа сборщика
Работа сборщика

Зачем нужен сборщик

Браузер уже понимает ES-модули, но в реальном проекте сборщик по-прежнему решает три задачи:

  • Количество запросов и размер. Несколько оптимизированных файлов вместо сотен мелких.
  • npm и особые форматы. import _ from 'lodash', TypeScript, JSX, Sass — то, что браузер напрямую не понимает.
  • Оптимизация. Минификация, удаление мёртвого кода, имена файлов с хешем для кеша.

Процесс: entry → граф зависимостей → преобразование (loader/plugin) → оптимизация → output.

webpack: базовая конфигурация

bash
npm i -D webpack webpack-cli
npx webpack
js
// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
  },
};