Релиз Webpack 5 (10.10.2020) | webpack

webpack 4 был выпущен в феврале 2018 года. С тех пор мы добавили множество функций без критических изменений. Мы знаем, что людям не нравятся серьезные изменения с критическими изменениями. Особенно с webpack, к которому люди обычно прикасаются только два раза в год, а остальное время он «просто работает». Но за доставку функций без критических изменений также приходится платить: мы не можем вносить существенные улучшения API или архитектуры.

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

Основная версия также давала возможность пересмотреть некоторые настройки по умолчанию и привести их в соответствие с предложениями и спецификациями, которые появляются в то же время.

Итак, сегодня (2020-10-10) выпущен webpack 5.0.0, но это не значит, что он готов, без ошибок или даже с полным набором функций. Как и в случае с webpack 4, мы продолжаем разработку, исправляя проблемы и добавляя функции. В ближайшие дни, вероятно, будет много исправлений. Функции появятся позже.

Общие вопросы

Итак, что означает релиз?

Это означает, что мы закончили вносить критические изменения. Было сделано множество рефакторингов для повышения уровня архитектуры и создания хорошей основы для будущих функций (и текущих функций).

Так когда же пора обновляться?

Это зависит от обстоятельств. Существует большая вероятность того, что обновление не удастся, и вам потребуется повторить попытку. Если вы готовы к этому, попробуйте выполнить обновление сейчас и оставьте отзыв о веб-пакете, плагинах и загрузчиках. Мы очень хотим исправить эти проблемы. Кто-то должен начать, и вы будете одним из первых, кто получит от этого пользу.

Webpack полностью основан на спонсорстве. Он не привязан к большой компании (и не оплачивается ею), как некоторые другие проекты с открытым исходным кодом. 99% доходов от спонсорства распределяются между вкладчиками и сопровождающими в зависимости от их вкладов. Мы верим в то, что вложим деньги в улучшение Webpack.

Но сейчас пандемия, и компании больше не открыты для спонсирования. Webpack тоже страдает в этих условиях (как и многие другие компании и люди).

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

Наибольшее спасибо trivago, который спонсирует webpack в течение последних 3 лет. К сожалению, они не могут продолжить свое спонсорство в этом году, так как сильно пострадали от Covid-19. Я надеюсь, что какая-то другая компания пойдет и пойдет по этим (гигантским) стопам.

Спасибо всем спонсорам.

Общее направление

В этом выпуске основное внимание уделяется следующему:

• Повышение производительности сборки с помощью постоянного кэширования.
• Улучшите долгосрочное кэширование с помощью лучших алгоритмов и параметров по умолчанию.
• Увеличьте размер пакета за счет улучшенного встряхивания дерева и генерации кода.
• Улучшение совместимости с веб-платформой.
• Очистите внутренние структуры, которые оставались в странном состоянии при реализации функций в версии 4, без внесения каких-либо критических изменений.
• Подготовьтесь к будущим функциям, внося критические изменения прямо сейчас, что позволит нам оставаться на версии 5 как можно дольше.

Миграция Руководство

См. Здесь руководство по миграции

Основные изменения: Удаление

Удаленные устаревшие элементы

Все устаревшие элементы в версии 4 были удалены.

МИГРАЦИЯ : убедитесь, что ваша сборка webpack 4 не выводит предупреждения об устаревании.

Вот несколько вещей, которые были удалены, но не имели предупреждений об устаревании в версии 4:

• IgnorePlugin и BannerPlugin теперь должны передавать только один аргумент, который может быть объектом, строкой или функцией.

Коды устаревания

Новые устаревшие коды включают код устаревания, поэтому на них легче ссылаться.

Синтаксис устарел

require.include устарел и по умолчанию будет выдавать предупреждение при использовании.

Поведение можно изменить с помощью Rule.parser.requireInclude на разрешенное, устаревшее или отключенное.

Автоматические полифиллы из Node.js удалены

Вначале целью webpack было позволить запускать большинство модулей Node.js в браузере, но структура модулей изменилась, и теперь написано множество вариантов использования модулей в основном для веб-интерфейса. webpack <= 4 поставляется с полифилами для многих основных модулей Node.js, которые автоматически применяются, когда модуль использует какой-либо из основных модулей (например, модуль crypto ).

Хотя это упрощает использование модулей, написанных для Node.js, они добавляют эти огромные полифилы в пакет. Во многих случаях в этих полифилах нет необходимости.

webpack 5 прекращает автоматическое полифиллинг этих основных модулей и фокусируется на модулях, совместимых с интерфейсом. Наша цель — улучшить совместимость с веб-платформой, где базовые модули Node.js недоступны.

МИГРАЦИЯ :

• По возможности старайтесь использовать модули, совместимые с интерфейсом.
• Можно вручную добавить полифилл для основного модуля Node.js. Сообщение об ошибке подскажет, как этого добиться.
• Авторы пакетов: Используйте поле browser в package.json чтобы сделать пакет совместимым с внешним интерфейсом. Предоставьте альтернативные реализации / зависимости для браузера.

Основные изменения: долгосрочное кэширование

Детерминированный блок, идентификаторы модулей и имена экспорта

Добавлены новые алгоритмы для долгосрочного кэширования. По умолчанию они включены в производственном режиме.

chunkIds: «детерминированный» moduleIds: «детерминированный» mangleExports: «детерминированный»

Алгоритмы назначают короткие (3 или 5 digits) числовые идентификаторы модулей и блоков и короткие (2 символа) имена для экспорта детерминированным способом. Это компромисс между размером пакета и долгосрочным кешированием.

moduleIds / chunkIds / mangleExports: false отключает поведение по умолчанию, и можно предоставить собственный алгоритм через плагин. Обратите внимание, что в webpack 4 moduleIds / chunkIds: false без настраиваемого плагина получилась рабочая сборка, а в webpack 5 вы должны предоставить настраиваемый плагин.

МИГРАЦИЯ : лучше всего использовать значения по умолчанию для chunkIds moduleIds и mangleExports . Вы также можете отказаться от старых значений по умолчанию chunkIds: "size", moduleIds: "size", mangleExports: "size" это будет генерировать меньшие пакеты, но чаще делает их недействительными для кэширования.

Примечание. В webpack 4 хешированные идентификаторы модулей привели к снижению производительности gzip. Это было связано с изменением порядка модулей и исправлено.

Примечание. В webpack 5 детерминированные идентификаторы включены по умолчанию в производственном режиме

Хэш реального контента

Webpack 5 будет использовать реальный хэш содержимое файла при использовании [contenthash] сейчас. Раньше он «всего лишь» использовал хеш своей внутренней структуры. Это может положительно повлиять на долгосрочное кеширование, когда изменяются только комментарии или переименовываются переменные. Эти изменения не видны после сворачивания.

Основные изменения: Поддержка разработки

Именованные идентификаторы фрагментов

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

Таким образом, вам больше не нужно использовать import (/ * webpackChunkName: "name" * / "module") для отладки. Но это все равно имеет смысл, если вы хотите контролировать имена файлов для производственных сред.

В производственной среде можно использовать chunkIds: "named" но убедитесь, что случайно не раскрыли конфиденциальную информацию об именах модулей.

МИГРАЦИЯ : если вам не нравится, что имена файлов меняются в процессе разработки, вы можете передать chunkIds: "natural" чтобы использовать старый числовой режим.

Module Federation

Webpack 5 добавляет новую функцию под названием «Module Federation», которая позволяет нескольким сборкам webpack работать вместе. С точки зрения времени выполнения модули из нескольких сборок будут вести себя как огромный граф подключенных модулей. С точки зрения разработчика модули можно импортировать из указанных удаленных сборок и использовать с минимальными ограничениями.

Подробнее см. В этом отдельном руководстве.

Основные изменения: новые функции веб-платформы

Модули JSON

Модули JSON теперь соответствуют предложению и выдают предупреждение, когда используется экспорт, отличный от стандартного. Модули JSON больше не имеют именованный экспорт при импорте из строгого модуля ECMAScript.

МИГРАЦИЯ : использовать экспорт по умолчанию.

Даже при использовании экспорта по умолчанию неиспользуемые свойства удаляются при оптимизации optimisation.usedExports а свойства искажаются при оптимизации optimangleExports .

В Rule.parser.parse можно указать собственный парсер JSON для импорта файлов, подобных JSON (например, для toml, yaml, json5 и т. Д.).

import.meta

• import.meta.webpackHot — это псевдоним для module.hot который также доступен в строгом ESM
• import.meta.webpack — это основная версия веб-пакета под номером
• import.meta.url — это файл: URL-адрес текущего файла (аналогично __ filename но как URL-адрес файла)

Модули ресурсов

Webpack 5 теперь имеет встроенную поддержку модулей, представляющих ресурсы . Эти модули либо отправят файл в папку вывода, либо вставят DataURI в пакет javascript. В любом случае они предоставляют URL для работы.

Их можно использовать несколькими способами:

• импортировать URL из ./image.png" и установить тип: "asset" в module.rules при сопоставлении такого импорта. (старый способ)
• новый URL ("./ image.png", import.meta.url) (новый способ)

"Новый способ "был выбран синтаксис, позволяющий запускать код и без сборщика. Этот синтаксис также доступен во встроенных модулях ECMAScript в браузере.

Поддержка Native Worker

При объединении нового URL для активов с new Worker / new SharedWorker / навигатором .serviceWorker.register webpack автоматически создаст новую точку входа для веб-воркера.

новый рабочий (новый URL-адрес ("./ worker.js", import.meta.url))

Синтаксис был выбран так, чтобы можно было запускать код и без связующего. Этот синтаксис также доступен во встроенных модулях ECMAScript в браузере.

URI

Webpack 5 поддерживает обработку протоколов в запросах.

• данные: поддерживаются. Поддерживается кодировка Base64 или raw. Mimetype может быть сопоставлен с загрузчиками и типом модуля в module.rules . Пример: импорт x из "data: text / javascript, экспорт по умолчанию 42"
• файл: поддерживается.
• http (s): поддерживается, но требует согласия через новый webpack.experiments.schemesHttp (s) UriPlugin ()
  • По умолчанию, когда нацеленные на «Интернет», эти URI приводят к запросам к внешнему ресурсу (они являются внешними)

Поддерживаются фрагменты в запросах: Пример: ./ file.js # фрагмент

Асинхронные модули

Webpack 5 поддерживает так называемые «асинхронные модули». Это модули, которые не оцениваются синхронно, а вместо этого основаны на async и Promise.

Их импорт через import выполняется автоматически, дополнительный синтаксис не требуется, а разница практически не заметна.

Импорт их через require () вернет обещание, которое разрешает экспорт.

В webpack есть несколько способов иметь асинхронные модули:

• async externals
• Модули WebAssembly в новой спецификации
• Модули ECMAScript, которые используют Top- Level-Await

Внешние

Webpack 5 добавляет дополнительные внешние типы, чтобы охватить больше приложений:

обещание : выражение, которое оценивается как обещание. Внешний модуль — это асинхронный модуль, и разрешенное значение используется как экспорт модуля.

import : Собственный import () используется для загрузки указанного запроса. Внешний модуль — это асинхронный модуль.

модуль : еще не реализовано, но планируется загрузить модули через импорт x из "..." .

скрипт : загружает URL-адрес через тег