Webpack
Тема дорожной карты · Frontend разработчик
Webpack — мощный бандлер JavaScript-модулей, который обрабатывает граф зависимостей приложения (JavaScript, TypeScript, CSS, изображения и шрифты) и генерирует оптимизированные бандлы, готовые к развёртыванию в продакшне. Webpack настраивается через webpack.config.js, где разработчики объявляют точки входа, пути вывода, загрузчики (babel-loader, css-loader, style-loader) и плагины (HtmlWebpackPlugin, MiniCssExtractPlugin) для полного контроля над сборочным конвейером. Продвинутые возможности Webpack включают разделение кода через динамический import(), tree shaking неиспользуемых ES-модульных экспортов и scope hoisting — всё это напрямую сокращает JavaScript-нагрузку и улучшает Core Web Vitals, в частности Time to Interactive. Несмотря на то что Vite стал выбором по умолчанию для новых проектов, Webpack остаётся отраслевым стандартом в крупных корпоративных кодовых базах и глубоко интегрирован во фреймворки Next.js и Create React App.
Как это работает
Webpack трансформирует исходник (TypeScript, JSX, современный JS, CSS Modules, ассеты) в бандлы, которые браузер исполнит, желательно оптимизированные под кеш и code splitting. Vite (dev-time esbuild + prod Rollup) — современный дефолт: быстрый HMR, разумные дефолты. Webpack — legacy, но повсеместен. Turbopack и Rspack — bun-/Rust-based эксперименты. Parcel — zero-config. Dev-сервер даёт HMR (Hot Module Replacement), правки отражаются без full reload.
Когда применять
Vite — для любого нового проекта: самый простой, быстрый, активно поддерживаемый. Webpack — только если проект уже на нём и миграция дорогая. Code-split по route-границе (lazy load). Bundle-аналитика (vite-plugin-visualizer, webpack-bundle-analyzer) — чтобы видеть, что шипится. Цель — < 200 KB начального JS gzipped на типичной странице.
Типичные ошибки
Ловушки Webpack: деплой неминифицированных dev-бандлов в production; импорт всей библиотеки, когда нужна одна функция (import _ from "lodash" вместо import map from "lodash/map"); нет dynamic imports для route-level splitting; нет source maps в production (отладка вслепую); коммит dist/ или node_modules в git. Аудит размера бандла ежемесячно — он только растёт.