Последние несколько недель я занимался Webpack. Для большинства тех, кого я знаю, кто его использует, внутренняя работа остается непрозрачной. Волшебный черный ящик. Итак, мы с парой друзей надеялись немного приоткрыть завесу, создав ряд замечательных инструментов визуализации веб-пакетов, доступных для создания «монитора веб-пакетов» — инструмента, интегрированного в процесс разработки, который может отслеживать сборки проекта и дайте, как, когда, где и почему любые потенциальные проблемы раздувания. Об этом в другой раз, а вот краткий обзор…
Плагины
Программой, которую я впервые выбрал, когда начинал с JS, был генератор статических сайтов Metalsmith, который почти полностью полагается на плагины. Хотя в webpack происходит намного больше, на первый взгляд это то же самое. Плагины выполняют тяжелую работу, и создание собственного — отличный способ получить доступ и изучить внутреннюю работу webpack. Вот оченьосновное руководство.
Плагины Webpack — это конструкторы/классы.
Создавая новый экземпляр объекта при запуске веб-пакета, можно передавать параметры плагину. Это важно для управления поведением каждого из плагинов в вашей конфигурации.
Плагины должны иметь метод «применить».
Когда webpack запускает плагин, он выгружает объект компилятора в приложение и запускает его. Внутри применения у вас есть доступ к компилятору и внутренностям веб-пакета.
Объект компилятора
Объект компилятора огромен, и в нем у вас есть доступ ко всему жизненному циклу компиляции веб-пакета. Что очень много. Но по большей части, если вы пишете плагин, вам нужен метод плагина.
Метод компилятора.plugin
ОК, мы подходим. Методу плагина передается несколько вещей:
- Хук жизненного цикла — определяет, что доступно для обратного вызова, и момент в процессе сборки, в котором он запускается. Список см. в документах webpack.
- Обратный вызов — он запускается, когда создается указанное событие, и событие, которое вы слушаете, будет определять, что будет передано в обратный вызов.
Разным событиям будут передаваться разные вещи, но, скорее всего, вы захотите прослушивать событие, которое передается в объекте компиляции обработчику событий.
Объект компиляции
Экземпляр объекта компиляции содержит все о компиляции в данный момент и о том, какое событие было сгенерировано, и позволяет автору плагина получить доступ к этой информации и действовать в соответствии с ней.
Например, мы решили получить доступ к источнику каждого из ресурсов js. Мы смогли изучить состав исходного кода, чтобы установить экономию размера файла, доступную с помощью различных инструментов оптимизации, таких как минимизация, сокращение и т. д.
Что теперь?
Как только вы окажетесь внутри среды выполнения веб-пакета, вы сможете делать практически все, что хотите, с любой частью веб-пакета, которую хотите. Навигация по различным открытым объектам и методам может быть совершенно ошеломляющей, но сосредоточьтесь только на нескольких, и возможности откроются.
Было увлекательно побывать под капотом такой ключевой части современной веб-разработки. Огромное спасибо команде webpack за невероятный продукт.
Это то, над чем мы работаем. В настоящее время он находится на очень ранней стадии!
