5.1. Что такое плагины и зачем они нужны

В этом разделе мы затронем, наверное, самую широкую концепцию webpack — его плагины.

Под словом «плагин» мы подразумеваем какой-то пакет или библиотеку. Всё, что делается с использованием webpack — это дополнительные пакеты, а вот часть React — библиотека. Например, Babel — это пакет, а вот react-dom — библиотека.

Что такое плагины

Плагины — это вспомогательные инструменты, которые без гибкой настройки способны менять поведение webpack.

Любой плагин — объект, у которого есть метод apply. Этот метод даёт полный доступ ко всему жизненному циклу компиляции — преобразования кода из используемого в поддерживаемый браузерами. Например, код преобразуется из TypeScript в JS или из SCSS в CSS.

Для примера возьмём плагин HtmlWebpackPlugin, который нужен для работы с HTML-файлами. Без него webpack не понимает формат .html и работать с ним не будет. То есть сервер разработки не запустится, и вы не увидите динамически вносимые изменения в ходе разработки.

HtmlWebpackPlugin отвечает за подключение нужного JS-файла к определённой странице. Плагин можно использовать для мультистраничного приложения. А ещё HtmlWebpackPlugin (при его настройке, когда мы соберём проект) полностью удаляет комментарии, консоль-логи и остальную ненужную информацию, которую разработчик оставил по своей невнимательности.

Любой плагин подключается с использованием ключевого слова require. Хорошая практика — задавать имена переменных от названия самого плагина в нотации CamelCase:

const HtmlWebpackPlugin = require('html-webpack-plugin');

Почему нужно разбираться в плагинах

  1. Умение настраивать плагины помогает ускорить разработку проекта.
  2. Плагины позволяют управлять проектом более гибко. Хорошая практика: один плагин — одна функция.
  3. Вы развиваетесь как разработчики.

Скорость работы

При инициализации конфигурационный файл webpack-а медленный и неоптимизированный. Для маленьких проектов со статичными данными и без тяжёлой логики такого конфига будет достаточно. Но вот если проект большой, имеет сложную логику и интерактивность (анимации, обработку данных), то на дефолтной сборке он будет собираться долго. Конечно, многое зависит и от мощностей компьютера, но можно привести конфиг к единообразию и сделать его максимально быстрым и удобным.

Настройка конфига

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

Профессиональный рост

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

Примечание: множество бойлерплейтов похожи друг на друга, ведь «под капотом» у них стоит хорошо настроенный и оптимизированный webpack. Например, бойлерплейты React и Angular используют в своей основе webpack — и ставятся они одной командой. Поэтому важно разбираться во всём этом, чтобы уметь настраивать и оптимизировать проект изнутри.

В небольших или средних по размеру компаниях знание webpack и плагинов может пригодиться даже начинающим разработчикам. Например, здесь руководитель может попросить джуна самостоятельно написать конфиг или внести правки для оптимизации.

Как не потеряться во всём этом

Нужно знать необходимый минимум плагинов, которые часто используются в разработке. Также есть плагины, которые отвечают за визуальную составляющую вывода информации. А ещё есть большие плагины, позволяющие менять webpack до неузнаваемости, вплоть до того, что мы сами можем создавать кастомные бойлерплейты.

Подробнее об этом мы поговорим в следующей статье.