Webpack

Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Также работает с TypeScript, CoffeeScript, его можно использовать совместно с Node.js. Webpack реализован как программа, которая при запуске обрабатывает модули, строит между ними граф зависимостей, а потом на основе графа генерирует единый файл.

Кто пользуется Webpack

• Frontend-разработчики, которые используют в работе JavaScript и его фреймворки.
• Backend-разработчики, пишущие серверную часть сайта или веб-приложения с помощью Node.js.
• Программисты на TypeScript и CoffeeScript — языках на базе JS, которые применяются во фронтенде и иногда в бэкенде.

Для чего нужен Webpack

Webpack используется:

• для быстрого объединения множества JavaScript-файлов в один большой;
• более легкого подключения кода JS к HTML-странице;
• транспиляции, или перевода кода на TypeScript или CoffeeScript на «чистый» JavaScript;
• подготовки файлов к размещению на сервере для их оптимизации;
• адаптации кода к старым версиям браузера;
• тестирования написанного кода с помощью локального сервера, где запускается собранный проект;
• разнообразных преобразований кода и выполнения дополнительных действий.

Понятия Webpack

Entry. Точка входа — файл, с которого сборщик начинает объединять модули. Обычно это основной JS-файл проекта, и от него зависят все остальные.

Output. Точка выхода — файл, в который запишется собранный проект. При настройке Webpack в качестве точки выхода указывают путь к конечному файлу.

Bundle. Бандл — собранный из модулей большой файл, результат работы сборщика.

Loaders. Они же лоадеры, или загрузчики — дополнительные сущности, которые расширяют возможности Webpack по преобразованию. По умолчанию сборщик распознает только файлы JS и JSON. С помощью лоадеров можно «научить» его понимать и другие файлы, от таблиц стилей CSS до изображений. Загрузчики скачиваются отдельно.

Plugins. Плагины — второй вид дополнительных сущностей. Это надстройки для решения дополнительных задач, например автоматического создания HTML-файла, к которому подключается бандл. Они тоже скачиваются отдельно.

Режимы. Режимы работы — наборы настроек для разных задач.

• Режим production — для финальной сборки перед загрузкой на сервер. Предусматривает максимальную оптимизацию и сжатие кода.
• Режим development — для тестовых сборок, которые нужны при разработке. Упор делается не на оптимизацию, а на читаемость. Можно скачать дополнительный модуль webpack-dev-server и запустить локальный сервер для тестирования проекта. С ним проект будет пересобираться при каждом изменении кода, и эти изменения будут применяться в реальном времени.
• Режим none не предусматривает оптимизации и отключает ее настройки.

По умолчанию Webpack работает в режиме none.

Как работает сборщик

1. Перед началом работы программист создает в папке проекта файл webpack.config.js. Он нужен для его настройки. Чтобы файл заработал, сборщик уже должен быть установлен.
2. В файле разработчик прописывает настройки сборщика для проекта. Он указывает точку входа и выхода, лоадеры и плагины, которые нужно применить при сборке. Там же можно установить режим работы — production или development.
3. В настройках менеджера пакетов npm разработчик указывает условия для запуска Webpack. Теперь при выполнении определенной команды запустится сборщик.
4. При запуске Webpack использует файл конфигурации webpack.config.js, где пользователь ранее указал настройки. Он находит файлы, связанные с точкой входа, строит граф их зависимостей, а потом собирает все в единый бандл на основе графа. Так бандл получается корректным, и все в нем подключается в правильном порядке.

Как начать работу с Webpack

Webpack можно скачать бесплатно из официального репозитория на GitHub либо установить с помощью менеджеров пакетов npm или Yarn. Инструмент может быть установлен глобально либо локально для каждого проекта.

Глобальная установка

С помощью npm:

npm i -g webpack webpack-cli

С помощью Yarn:

yarn global add webpack webpack-cli

Теперь можно запустить Webpack:

webpack-cli

Локальная установка

C помощью Yarn:

yarn add webpack webpack-cli -D

C помощью npm:

npm i webpack webpack-cli —save-dev

После этого нужно добавить строки в package.json файл:

{
//…
«scripts»: {
«build»: «webpack»
}
}

После этого можно запустить Webpack, введя в корневом каталоге проекта:

yarn build

Затем через менеджер пакетов устанавливаются лоадеры и плагины и настраивается конфигурационный файл для проекта.