Webpack

Webpack строит граф модулей и преобразует файлы через loaders (на файл) и plugins (на весь граф). Остаётся популярным в крупных приложениях из‑за глубокой настройки и enterprise-интеграций.

| Понятие | Роль | |---------|------| | Loader | Преобразование типа модуля (TS, CSS, assets) | | Plugin | Оптимизация графа, HTML, split chunks | | `splitChunks` | Разделение vendor и async routes | | `sideEffects` | Подсказки tree-shaking в `package.json` |

					module.exports = {
  module: {
    rules: [{ test: /\.tsx?$/, use: 'ts-loader' }],
  },
  optimization: { splitChunks: { chunks: 'all' } },
};
				

Dev server и persistent cache ускоряют итерации. Source maps и bundle analyzer диагностируют размер production.

На интервью: loaders vs plugins, code splitting, лимиты tree-shaking с CJS, long-term cache имён файлов и миграция с Webpack.

Типовые ошибки: раздутый config и медленные сборки; импорт целых библиотек; игнор `sideEffects`.

Компромисс — гибкость и экосистема против стоимости конфигурации и времени сборки.

Чеклист:

• Роли loader и plugin.
• Анализ бандла.
• `sideEffects` соответствует модулям.
• Кэш с дисциплиной инвалидации.