Что такое WebPack?

Webpack — это сборщик модулей (module bundler): он берёт множество исходных файлов (JS, CSS, изображения) и их зависимости и собирает в оптимизированные бандлы для браузера.

Зачем нужен

Браузеру неудобно загружать сотни отдельных модулей. Webpack строит граф зависимостей от точки входа и объединяет всё в несколько файлов, попутно преобразуя и оптимизируя код.

Понятия

• Entry — точка входа (src/index.js).
• Output — куда и как складывать результат.
• Loaders — преобразуют файлы: babel-loader (JS), css-loader, ts-loader.
• Plugins — расширяют сборку: HtmlWebpackPlugin, MiniCssExtractPlugin.
• Mode — development / production (минификация, оптимизации).

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [{ test: /\.jsx?$/, use: 'babel-loader' }],
  },
};

Возможности оптимизации

• Code splitting — разбиение на чанки, ленивая загрузка.
• Tree shaking — удаление неиспользуемого кода.
• Hot Module Replacement — обновление модулей без перезагрузки.

Альтернативы

Vite (с Vite 8 — на базе Rolldown, раньше esbuild/Rollup; быстрее в dev), Rollup, esbuild, Parcel.

Коротко для собеседования

Webpack — бандлер: строит граф зависимостей от entry, преобразует файлы через loaders, расширяется plugins и оптимизирует (code splitting, tree shaking, HMR). Современная альтернатива для dev — Vite.