WebPack. What is it?

WebPack. What is it?

В этом посте мы подробнее поговорим про сборщик WebPack. Это довольно функциональный инструмент, с кучей возможностей, с которыми и за месяц можно не разобраться. Однако, наиболее важно понять саму концепцию данного инструмента и его предназначение, а всё остальное придёт с практикой решения конкретных задач.

Итак, WebPack нужен для того, что бы собирать проект, состоящий из кучи модулей, в один или несколько файлов. При правильной настройке WebPack будет работать не только с JS файлами, но и со стилями, HTML разметкой, различными медиафайлами. Он может оптимизировать ваш код, контролировать размер итогового файла, и ещё очень много всего.

Однако, для подобной функциональности WebPack-у нужны дополнительные инструменты, которые расширяют его базовые возможности. Под дополнительными инструментами я понимаю, как разные плагины, так и всякие транспиляторы, линтеры кода, препроцессоры и тд.

Image for post

Image for post

Например, как я уже говорил в предыдущем посте, WebPack часто используется совместно с Babel. Но в реальном проекте недостаточно работать только с JS кодом, есть ещё JSX, TypeScript, стили и многое другое. Так что вместе с WebPack часто используются SASS (SCSS) и LESS компиляторы, компилятор TS…

А теперь о том, зачем я про концентрировал внимание на работе с разными сторонними инструментами. WebPack, если можно так выражаться, делегирует часть работы, и это происходит благодаря использованию лоадеров (loaders).

LOADERS

Лоадеры — это своего рода связующие части, благодаря которым WebPack может работать с другими инструментами. Существует огромное количество лоадеров, для работы с самыми разными инструментами, для решения самых разных задач.

Из своей практики могу выделить несколько наиболее часто используемых лоадеров:

  • babel-loader — необходим для работы с транспилятором Babel;
  • sass-loader / less-loader / style-loader — это всё лоадеры для работы с CSS препроцессорами;
  • postcss-loader — как вы уже догадались, этот лоадер нужен для работы с PostCSS;
  • script-loader — он как бы импортирует какой-то файл в глобальную область видимости. Это полезно, когда вы хотите подключить какую-нибудь библиотеку, и она будет использоваться во многих модулях. Вам нужно импортировать её лишь один раз;
  • eslint-loader — нужен для предварительного анализа кода с помощью ESLint;
  • url-loader / file-loader — данные лоадеры работают с медиафайлами. Позволяют импортировать картинки прямо в JS (JSX, TS) код, а затем всё это обрабатывают и оптимизируют 🙂

Помимо этих лоадеров существует ещё масса других. Вы можете прочитать про них в официальной документации.

Сами по себе лоадеры настраиваются, позволяя контролировать работу тех модулей, которые они “подгружают” для работы. К примеру, в настройках babel-loader можно заранее прописать, какие пресеты и плагины будет использовать Babel (про него поговорим в следующем посте).

Помимо лоадеров, возможности WebPack можно расширить с помощью плагинов (plugins). Давайте теперь поговорим про них.

PLUGINS

Плагины имеют больший контроль над сборкой проекта, и сильнее влияют на саму сборку. В отличие от лоадеров, которые по факту просто “дёргают” другие инструменты для предварительной обработки вашего кода, плагины в основном работают в конце, после того как лоадеры сделали всё необходимое.

Порывшись в интернете, я нашёл такую вот картинку, где демонстрируется порядок работы лоадеров и плагинов:

Image for post

Image for post

Сперва срабатывают лоадеры, обрабатывая CSS, а затем плагины, которые работают уже с готовым CSS, оптимизируя и минифицируя его.

Плагины позволяют очень гибко настроить сборку проекта, поскольку непосредственно влияют на итог. Благодаря им можно делать очень многое, автоматизировать различные нюансы сборки, такие как: оптимизация итогового бандла, автодобавление необходимых тегов в HTML файл, минификация CSS, создание файла manifest и ещё куча всего.

Также, благодаря плагинам, а вернее плагину HotModuleReplacement, можно заметно облегчить разработку приложения, поскольку он позволяет вносить изменения не перезагружая браузера и не обнуляя состояние приложения (а это очень удобно).

Для возможности, описанной выше, необходимо использовать WebPack Dev Server, о котором мы поговорим чуть позже.

Из наиболее часто используемых плагинов могу выделить следующие:

  • HtmlWebpackPlugin — данный плагин обрабатывает html файл, при необходимости минифицируя и изменяя его, и добавляет теги script, с путями к итоговым файлам бандла (или к одному);
  • MiniCssExtractPlugin — плагин позволяет минифицировать ваш CSS;
  • TerserWebpackPlugin — собственно, минифицирует JS код;
  • CopyWebpackPlugin — данный плагин позволяет скопировать необходимые файлы в итоговую папку бандла без изменений;
  • HotModuleReplacementPlugin — плагин для работы с “горячим обновлением”;

Про плагины вы можете почитать в офф. документации. Там их действительно много 😉