Уменьшите рабочую нагрузку, выполняя определенные задачи только на обновленных фрагментах кода.
Webpack - это инструмент, который помогает нам объединять все наши файлы по модульному принципу. По умолчанию Webpack генерирует один выходной пакет. В этой статье мы рассмотрим сценарий, в котором в результате разделения кода создается несколько пакетов. Однако разделение кода не является сутью данной статьи.
Набросок сцены
Представьте себе случай, когда вы создаете мультибрендовое приложение, размещенное на одной и той же платформе. Каждый раз, когда мы создаем наш код, нам приходилось загружать его на эту платформу, чтобы визуализировать наши изменения.
В идеале наша кодовая база должна быть разделена на несколько пакетов, отдельные пакеты для каждой марки и несколько общих пакетов. При обновлении кода, связанного с определенным пакетом, Webpack будет следить за тем, чтобы при просмотре обновлялся только этот конкретный фрагмент.
Теперь мы хотим выполнить несколько шагов после сборки, например, отправить код на платформу, но хотим применить их только к обновленным фрагментам. Для этого мы напишем небольшой плагин для Webpack.
Плагин Webpack, обрабатывающий обновленные чанки
Настраивать
Создайте файл JavaScript со следующим стандартным кодом для подключаемого модуля Webpack. Метод конструктора будет выполнен при инициализации плагина. Метод apply будет выполнен при запуске сборки. Объект компилятора предоставит нам доступ ко всей информации о сборке.
Добавьте плагин в конфигурацию Webpack.
Поиск обновленных фрагментов
Когда Webpack создает чанк, он сохраняет хэш чанка вместе с ним. Если вывод фрагмента изменяется, изменяется и хеш. Итак, чтобы проверить, обновился ли чанк, нам просто нужно проверить, не изменился ли хеш.
Итак, в нашем плагине мы будем хранить карту имен чанков и хешей. Затем мы собираемся отфильтровать куски, хэш которых равен сохраненному хешу. И для каждого фрагмента мы сохраняем обновленный хеш. В результате получается список обновленных фрагментов, и, перебирая этот список, мы можем выполнить задачу для каждого из этих фрагментов.
Теперь у нас есть место, где у нас есть доступ к нашим данным фрагментов, только для тех фрагментов, которые были обновлены. Вы можете расширить это, чтобы использовать метод обратного вызова, или полностью настроить плагин для конкретной цели.
Отладка
В InteliJ вы можете добавлять точки останова в файл плагина. Затем запустите свой сценарий Webpack в режиме отладки и проверьте, что происходит внутри, и проверьте значения.
Если вы хотите проверить плагин и использовать его в своем проекте, ознакомьтесь с моим пакетом npm.
Опыт работы с клиентами Capgemini в Бельгии
Мы находимся в авангарде веб-разработки.
Вы заинтересованы в карьере веб-разработчика в Capgemini? Есть ли у вас все необходимое, чтобы присоединиться к нашей команде экспертов? Свяжитесь с нами!
