Что такое Webpack и зачем его используют

Webpack - это сборщик проекта, который содержит в себе ряд полезных функций для разработки приложений.

Какие возможности предоставляет Webpack

Ниже кратко опишу возможности Webpack. Думаю, этого будет достаточно, чтобы окончательно понять, зачем нужен данный инструмент.

Модульность

С помощью Webpack можно разбить код своего проекта (во время разработки) на кучу модулей, а потом воедино собрать в один файл в релизной версии.

Модульность позволяет разделить продукт на две версии: release (окончательная версия) и production (в производстве). В дальнейшем такой проект легче обслуживать.

пример webpack

Транспиляция

Транспиляция - это автоматизированный процесс переписывания кода с одного языка на аналогичный код на другом языке.

Webpack сам, с помощью Babel, перепишет ваш код c новых стандартов JavaScript на более поздний. С помощью этого вы можете не беспокоится за работоспособность своего приложения в старых браузерах.

Встроенный сервер

Webpack имеет свой собственный сервер с режимом контроля изменений. То есть, изменяя один файл, webpack сам обновляет файлы и отображает изменения в проекте.

Обычно сервер с проектом запускается через консольную команду npm run dev и располагается по адресу http://localhost:8080.

Разделение и оптимизация

Webpack способен разделить релизный выходной файл (общий со всеми модулями) на несколько файлов поменьше. Это делается для того, чтобы избежать чрезмерной нагрузки на браузер пользователя при первой загрузки приложения. Делается это в рамках больших проектов: CRM-систем и крупных веб-приложений.

И это еще не все возможности Webpack… хотя этого вполне хватит для общего понимания инструмента. Если загорелись желание обучиться данной технологии, ниже оставлю ссылку на официальную документацию.

Webpack и Gulp: в чем различия

Webpack - это эволюционированный task-manager (или task-runner). Раньше, до появления Webpack, люди использовали Gulp и Grunt, которые также умели собирать проект (в основном верстку) и контролировали изменения в проекте в режиме реального времени.

Webpack собрал всего понемногу от своих предшественников и добавил своего, поэтому он обладает такими функциями, которых нет, например, в Gulp. Для примера, Gulp не имеет собственного dev-сервера, нет hot-reload (т.е при изменении JavaScript файла Webpack сможет отрендерить компонент в режиме реального времени), здесь нет режима unit тестирования, отсутствует babel (из коробки), да и скорость компиляции JavaScript заметно ниже.