Если вы собираете внешние ресурсы, которые используете в разработке проекта бандлером, то скорее всего вы используете Webpack. В этой статье я расскажу о некоторых новых функциях, которые появятся в Webpack 5, и о том, какие нюансы вы должны знать, если собираетесь переходить на новую версию этого сборщика.
Новый релиз Webpack наполнен множеством новых фишек. Я не буду подробно описывать каждое нововведение, но поделюсь несколькими важными изменениями со слов команды разработчиков.
Что ожидается
На момент написания этой статьи версия 5 все еще находится в стадии бета (beta.13). Из-за того что эта версия (v5) в принципе имеет серьезные изменения, то некоторые плагины могут перестать корректно работать .
Разработчики пытаются обеспечить максимальную совместимость там где это возможно, но изменения 5 версии усложняют это. Если вы перешли на 5 версию с webpack 4 и у вас некорректно работает плагин, то вы можете сообщить об этом здесь. Вы также можете посмотреть полный список изменений по этой ссылке. Важно знать, что минимальная поддерживаемая версия Node.js — 10.13.0. Подробнее о миграции на webpack 5 можно узнать из официальной документации.
В целом, команда разработчиков webpack 5 cфокусировалась на нескольких ключевых моментах:
- повышение производительности сборки с постоянным кэшированием,
- улучшение долгосрочного кэширования с помощью лучших алгоритмов и настроек по умолчанию,
- оптимизация кода бандлера,
- подготовка к будущим функциям путем внесения критических изменений и предоставления веб-разработчикам возможность оставаться на 5 версии как можно дольше
Чтобы протестировать работу webpack 5, вы можете установить ее с помощью следующей команды:
npm install —save-dev webpack@next
Эта команда установит последнюю альфа-версию, но вы также можете установить различные версии, используя теги из changelog репозитория webpack с помощью следующей команды:
npm install —save-dev webpack@v5.0.0-alpha.9
Если вы используете Webpack v4 или новее, вам также нужно установить CLI:
npm install --save-dev webpack-cli
Устаревшие функции
Все элементы, устаревшие в v4, были удалены для v5. При переходе на v5 убедитесь, что ваша сборка webpack 4 не выводит предупреждения об устаревании. Если у вас возникли проблемы с ошибками, попробуйте убрать опцию stats или не использовать пресеты. Тем не менее, версия все еще находится в стадии подготовки к выпуску, поэтому всегда лучше спросить команду webpack через GitHub.
Есть еще несколько вещей, которые также были удалены, но в v4 не было предупреждений об устаревании. Например изменены настройки для IgnorePlugin и BannerPlugin. Теперь в опции передается объект параметров. Ниже приведен пример, который можно использовать для IgnorePlugin:
new webpack.IgnorePlugin({ resourceRegExp: regex })
Удалены автоматические полифилы Node.js
Когда-то цель webpack заключалась в том, чтобы позволить запускать большинство модулей Node.js в браузере, но теперь многие варианты использования модулей написаны специально для фронтенда. Версии ≤ 4 поставляются с полифилами для подавляющего большинства основных модулей Node.js, которые автоматически применяются, когда код использует какие-либо модули Node.js.
В конечном итоге эти полифилы добавлялись в сборку, но в них не было необходимости. В webpack 5 разработчики постараются это оптимизировать. Было бы идеально добавлять полифилы вручную только там где они нужны.
Детерминированные чанки и ID модулей
Новые алгоритмы были добавлены, чтобы помочь с долгосрочным кэшированием. Они будут запущены в production сборке в со следующими строками конфигурации:
chunkIds: "deterministic”,
moduleIds: “deterministic"
Алгоритмы добавляют короткие числовые идентификаторы чанкам. Это компромисс между размером сборки и долгосрочным кэшированием. При переходе с версии 4 лучше использовать значения по умолчанию для chunkIds и moduleIds.
Названия ID чанков
Новый алгоритм названия ID чанков теперь включен по умолчанию в режиме development. Он дает чанкам удобочитаемые имена. ID модуля определяется его путем относительно контекста. ID чанка определяется содержимым чанка, поэтому вам больше не нужно использовать:
import(/* webpackChunkName: "name" */ "module")
Если вы хотите контролировать имена файлов для production сборки, то можно использовать chunkIds: «named», просто следите за тем, чтобы случайно не предоставить конфиденциальную информацию об именах модулей.
Чтобы использовать старый числовой нейминг можно передать в настройки следующую строку: chunkIds: “natural”
Компиляторы
О компиляторах в webpack можно узнать тут.
Компиляторы должны будут закрываться после использования, так как они теперь входят и выходят из неактивных состояний, а также имеют хуки для этих состояний. Плагины могут использовать эти хуки для выполнения маловажной работы. Когда компилятор закрывается все оставшиеся работы должны быть завершены как можно скорее. Колбэк будет сигнализировать, что закрытие было завершено.
Авторы плагинов должны предусмотреть, что некоторые пользователи могут забыть закрыть компилятор, поэтому процесс завершения работы webpack должен быть в режиме ожидания. Процессы также не должны выходить из фоновой работы, пока запущен webpack. При передаче колбэка webpack автоматически вызовет закрытие компилятора. При обновлении до v5 убедитесь, что при использовании API Node.js вызываете Compiler.close после завершения работы.
Постоянное кеширование
В версии 5 вы найдете экспериментальную функцию — кеширование файловой системы. Чтобы включить ее используйте следующую строку в файле конфигурации webpack:
cache: { type: "filesystem” }
Прямо сейчас готов только основной набор функций. Но при его использовании вы должны знать об ограничениях, чтобы избежать неожиданных ошибок. Если вы не полностью понимаете эти ограничения, вам, вероятно, лучше избегать этой функции.
У вас также будет автоматическое аннулирование кэша для импорта кода исходного модуля и структуры файловой системы, но нет автоматического аннулирования кэша для конфигураций и изменений загрузчика / плагина / ядра. Если вы хотите вручную аннулировать кеш, то есть опция, которую можно использовать в вашей конфигурации с cache.version. В настоящее время она еще не полностью готова, но вы можете сделать все без проблем, обновив свой cache.version при обновлении зависимостей инструментов (webpack, loader, plugin) или при изменении конфигурации.
Если вы хотите автоматизировать это, лучше всего хэшировать webpack.config.js и node_modules/.yarn-integrity и передавать их в cache.version. Скорее всего, команда разработчиков webpack сделает это стандартным функционалом.
При использовании постоянного кэша вам больше не нужен cache-loader. То же самое относится и к Babel cacheDirectory.
Перевод статьи «New features in webpack 5»
