Webpack в 2026: зачем нужен бандлер и что вместо него
Содержание
О проверке кода. Конфиги не собирались — в отличие от материалов по Node.js с фактическим выводом. Даны по документации Webpack и Vite. Говорим прямо, а не ставим бейдж «проверено».
Webpack девять лет был синонимом слова «сборка» во фронтенде. Сегодня вопрос сместился: сначала — зачем вообще нужен бандлер, потом — какой, и наконец — нужен ли он этому проекту.
Что делает бандлер
Бандлер берёт ваш код из десятков файлов и зависимостей и собирает его в несколько оптимизированных файлов для браузера. По пути он решает сразу несколько задач:
-
1
Собирает граф зависимостейИдёт по
import, находит все связанные модули - 2 Транспилирует синтаксисСвежий JS → понятный целевым браузерам
- 3 Импортирует не только JSСтили, картинки, шрифты — как модули
- 4 ОптимизируетУдаляет неиспользуемое (tree-shaking), минифицирует, делит на части
- 5 Выдаёт бандлыНесколько готовых файлов вместо сотни исходных
Без бандлера сотня модулей — это сотня запросов к серверу и никакой оптимизации. Он же превращает import styles from './card.css' в рабочий код, хотя браузер так импортировать стили не умеет.
Webpack: мощный и тяжёлый
// webpack.config.js — минимум
export default {
entry: './src/index.js',
output: { filename: 'bundle.js', path: '/dist' },
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|jpg)$/, type: 'asset/resource' },
],
},
};
Сила Webpack — в гибкости: loaders учат его понимать любой тип файла, plugins — делать что угодно на любом этапе сборки. Практически нет задачи, которую он не решит.
Оборотная сторона — та же гибкость. Конфиг разрастается, разобраться в чужом webpack.config тяжело, а старт сборки в разработке ощутимо медленный на большом проекте. Это та же история, что с монолитными фреймворками: мощь ценой сложности.
Что изменилось: приход Vite
Главный сдвиг с 2018 года. Vite переосмыслил сборку, и новые проекты уходят к нему.
| Webpack | Vite | |
|---|---|---|
| Старт в разработке | собирает весь проект | мгновенно — отдаёт модули по требованию |
| Конфигурация | подробная, много ручного | разумные умолчания |
| Основа скорости | JavaScript | esbuild на Go |
| Зрелость | максимальная, всё есть | молодой, но покрывает основное |
Ключевая идея Vite: в разработке не собирать проект целиком. Браузеры понимают ES-модули нативно, поэтому Vite отдаёт их по запросу и пересобирает только изменённый файл. Отсюда мгновенный старт даже на большом проекте.
А для продакшена Vite всё же собирает бандл — через esbuild, написанный на Go. Тяжёлую работу делает не JavaScript — ровно тот приём, что даёт скорость и в других местах платформы.
npm create vite@latest my-app
Одна команда, и сборка работает — без конфига, который в Webpack пришлось бы писать руками.
Нужен ли бандлер вообще
Вопрос, который в 2018-м не стоял. Браузеры понимают ES-модули нативно:
<script type="module">
import { greet } from './greet.js';
greet();
</script>
Для небольшого сайта этого достаточно: пишете модули, браузер их грузит, никакой сборки. Именно так работает этот сайт — статика без бандлера.
Бандлер окупается, когда:
- файлов и зависимостей много — сотня модулей без сборки медленная;
- есть пакеты из npm — их формат браузер напрямую не понимает;
- нужна оптимизация под прод — минификация, tree-shaking, деление на части.
Для лендинга, документации, небольшого виджета сборка часто лишняя. Это та же мысль, что проходит через весь сайт: ORM не всегда нужен, jQuery не всегда нужен, CSS-препроцессор не всегда нужен — и бандлер тоже.
Что было на этой странице в 2018 году
Первая версия вышла 6 июля 2018 года и учила Webpack как обязательный инструмент фронтенда: настройка конфига, loaders, сборка. Для 2018 года — точно: без бандлера серьёзный проект было не собрать, а Webpack был бесспорным лидером.
Что изменилось:
- Vite потеснил Webpack как выбор по умолчанию для новых проектов. Webpack не сломался — просто появился инструмент, который для большинства задач быстрее и проще.
- Нативные ES-модули сделали сам вопрос «а нужна ли сборка» осмысленным. В 2018-м бандлер был обязателен всегда; сегодня — не для каждого проекта.
- esbuild и Go-инструменты показали, что скорость сборки можно поднять на порядок, если уйти от JavaScript в тяжёлых местах.
Webpack жив и развивается — но из безальтернативного стандарта стал одним из вариантов. Мы переписали урок не как «настройка Webpack», а как разговор о том, что такое сборка, зачем она и когда без неё можно обойтись — потому что сегодня это и есть настоящий вопрос.
Смежные темы: ECMAScript 6 — откуда взялись модули; React — где Vite заменил старые инструменты; что такое Node.js — на нём работают бандлеры. Полный список — в уроках JavaScript.