Современные JavaScript-приложения редко состоят из одного файла. Даже небольшой проект обычно включает десятки или сотни модулей:
Браузер не умеет эффективно работать с такой структурой напрямую. Если подключать каждый файл отдельно, возникают проблемы:
Сборщик модулей решает эти задачи, объединяя проект в оптимизированный набор файлов для браузера.
Webpack относится именно к таким инструментам.
Ранние JavaScript-приложения подключались через обычные теги
<script>:
<script src="utils.js"></script>
<script src="api.js"></script>
<script src="app.js"></script>Такой подход создавал множество ограничений.
Все переменные оказывались в window.
var user = {};Если другой файл содержал:
var user = [];возникал конфликт.
Если app.js использовал функцию из
utils.js, то подключение должно было идти строго по
порядку.
Ошибка последовательности ломала приложение.
Файлы могли случайно изменять данные друг друга.
Когда проект разрастался до сотен файлов:
Для решения этих проблем появились модульные системы.
Использовалась в Node.js.
const math = require('./math');
console.log(math.sum(2, 3));Экспорт:
module.exports = {
sum
};Современный стандарт JavaScript.
import { sum } from './math.js';
console.log(sum(2, 3));Экспорт:
export function sum(a, b) {
return a + b;
}Модули позволили:
Но появилась новая проблема.
Даже при использовании ES Modules остаются ограничения.
Если приложение состоит из 500 модулей, браузер должен загрузить 500 файлов.
Браузер не умеет импортировать:
import './styles.scss';или:
import logo from './logo.svg';без дополнительной обработки.
Исходный код обычно содержит:
Некоторые возможности JavaScript поддерживаются не всеми браузерами.
Например:
const user = profile?.user?.name;Старые браузеры не понимают optional chaining.
Webpack анализирует проект как граф зависимостей и преобразует его в набор файлов, готовых к запуску в браузере.
Процесс выглядит так:
Webpack рассматривает приложение как цепочку связанных модулей.
Например:
import { render } from './ui';Webpack обнаруживает зависимость:
app.js
└── ui.jsЕсли ui.js импортирует другие файлы:
import './styles.css';
import Button from './Button';граф расширяется:
app.js
└── ui.js
├── styles.css
└── Button.jsWebpack рекурсивно проходит по всем зависимостям.
Множество модулей превращаются в несколько оптимизированных bundle-файлов.
Исходный код:
function sum(a, b) {
return a + b;
}После минификации:
function n(n,r){return n+r}Размер уменьшается.
Технология называется Tree Shaking.
Пример:
export function used() {}
export function unused() {}Если импортируется только:
import { used } from './math';Webpack может удалить unused.
Webpack интегрируется с Babel.
Современный код:
const result = user?.profile?.name;превращается в совместимый со старыми браузерами JavaScript.
Webpack умеет:
Изображения можно импортировать как модули:
import logo from './logo.png';Webpack:
Приложение можно загружать частями.
import('./admin');Webpack создаёт отдельный chunk.
Код загрузится только при необходимости.
Во время разработки изменения применяются без полной перезагрузки страницы.
Это ускоряет разработку.
Webpack объединил множество задач в одном инструменте.
До него разработчикам приходилось отдельно использовать:
Webpack создал единую экосистему.
Webpack уменьшает:
Проект разделяется на независимые модули.
Большие приложения становятся управляемыми.
Webpack автоматизирует:
Через Babel и дополнительные loaders обеспечивается поддержка старых браузеров.
Процесс сборки называется build.
Во время него Webpack:
Например:
entry: './src/index.js'Анализируются все import.
Каждый файл проходит обработку.
Например:
test: /\.scss$/означает обработку SCSS.
Плагины изменяют процесс сборки.
Создаются итоговые файлы.
Bundle — итоговый файл, созданный Webpack.
Например:
main.bundle.js
vendors.bundle.jsВнутри bundle находятся:
Теоретически современные браузеры поддерживают ES Modules.
Однако на практике Webpack всё ещё нужен.
Браузер не минимизирует код автоматически.
Webpack умеет отделять библиотеки от основного приложения.
Браузер не понимает SCSS.
Импорт изображений требует сборщика.
Webpack удаляет лишний код.
Webpack создаёт оптимизированные production-сборки.
Webpack рассматривает всё как модули:
Например:
import './styles.scss';
import logo from './logo.svg';Это одна из ключевых идей Webpack.
Webpack состоит из нескольких основных компонентов.
Точка входа.
entry: './src/index.js'Настройки выходных файлов.
output: {
filename: 'bundle.js'
}Преобразуют файлы.
Например:
Расширяют возможности Webpack.
Например:
Режим сборки.
mode: 'development'или:
mode: 'production'Приоритет:
Приоритет:
Webpack автоматически меняет поведение в зависимости от режима.
Одностраничные приложения содержат:
Без сборщика такие проекты становятся практически неуправляемыми.
Webpack обеспечивает:
Рост популярности:
резко увеличил сложность фронтенд-приложений.
Webpack стал центральным инструментом инфраструктуры:
Многие инструменты скрывают конфигурацию Webpack, но продолжают использовать его внутри.
Необходимо:
Без сборщика потребуется множество отдельных инструментов.
Webpack объединяет всё в единую систему.
Несмотря на мощность, Webpack известен сложностью конфигурации.
Причины:
Именно поэтому появились более простые инструменты:
Тем не менее Webpack остаётся одним из самых мощных и гибких сборщиков.
Webpack превращает набор разрозненных файлов и зависимостей в оптимизированное приложение, пригодное для эффективной работы в браузере.
Ключевая концепция заключается в том, что любое приложение рассматривается как граф модулей, который можно: