список изменений webpack-4.0 (перевод)

предисловие

Чисто машинописный перевод, есть также небольшое количество более тупых переводов, простите меня за эту часть, я не слишком понимаю😂

большое изменение

• окружающая обстановка

  Nodejs 4 больше не поддерживается. Исходный код был обновлен до более высокой версии ecmascript.

• использовать

  • Вы должны выбрать один из двух режимов (modeили--mode): производство или разработка
    • производство откроет все оптимизации для создания оптимизированного пакета
    • разработка Открыть комментарии и подсказки и включить функцию eval devtool
    • производство не поддерживает режим прослушивания, разработка имеет более быстрые инкрементные сборки
    • ты можешь пройтиoptimization.*способ установить более подробную конфигурацию (создать свой пользовательский режим)
    • process.env.NODE_ENVПеременная была установлена ​​как в режиме производства, так и в режиме разработки (только в коде сборки, а не в конфигурации)
    • Также есть скрытыйnoneрежим, отключающий все

• грамматика

  • import()всегда будет возвращать объект с пространством имен. Модули CommonJS будут упакованы в экспорт по умолчанию.
    • Это может сломать ваш код, если вы используетеimport()способ импортировать ваш код CommonJS.

• настроить

  • Вам больше не нужно использовать эти плагины:
    • NoEmitOnErrorsPlugin ->optimization.noEmitOnErrors(производственный режим включен по умолчанию)
    • ModuleConcatenationPlugin ->optimization.concatenateModules(производственный режим включен по умолчанию)
    • NameModulesPlugin -> optimization.nameModules(режим разработки включен по умолчанию)
  • CommonsChunkPluginбыло удалено ->optimization.splitChunks,optimization.runtimeChunk

• JSON

  • webpack теперь может обрабатывать нативный json
    • Когда вам нужно преобразовать json в js через загрузчик, вам может понадобиться добавитьtype:"javascript/auto"
    • Вы также можете использовать JSON напрямую, без использования загрузчика.
  • Разрешить импорт JSON через синтаксис ESM
    • Удалены неиспользуемые экспорты модулей JSON.

• оптимизация

  • возобновитьuglifyjs-webpack-pluginдо версии 1
    • Поддержка ЕС2015

большая функция

• модуль

  • webpack теперь поддерживает следующие типы модулей:

    • javascript/auto: (тип по умолчанию в webpack 3) модули javascript внутри всех модулей

      Поддержка системы: CommonJS, AMD, ESM

    • javascript/esm: модули EcmaScript, все другие типы системных модулей будут недоступны.

    • javascript/dynamic: не будут доступны только модули CommonJS и EcmaScript.

    • json: данные JSON, которые можно получить с помощью require или import

    • webassembly/experimental: модули WebAssembly (в настоящее время все еще экспериментальные)

  • javascript/esmИзбегание при работе с ESMjavascript/autoстроже

    • Импортированное имя должно существовать в импортированном модуле.

    • Динамические модули (не esm, такие как CommonJS) можно получить только через импорт по умолчанию.

      Все другие методы (включая импорт пространства имен) сообщат об ошибке.

  • существует.mjsМодуль будет использоваться по умолчаниюjavascript/esmмодель

  • Модули WebAssembly

    • Может импортировать другие модули (JS и WASM)
    • Модули, экспортированные из WebAssembly, проходят проверку импорта ESM
      • Предупреждение/сообщение об ошибке будет активным, когда вы попытаетесь импортировать несуществующий контент из экспорта WASM.
    • Его можно использовать только в асинхронно загруженных чанках, и он не работает должным образом в инициализированных чанках. (большое влияние на производительность страницы).
      • пройти черезimport()способ импорта модуля WASM

• оптимизация

  • sideEffects: falseТеперь поддерживается использование в package.json.

    • внутри package.jsonsideEffectРазрешает выражения glob и массивы выражений glob

  • Массивы JSONP использовались вместо функций JSONP -> поддержка тегов асинхронного скрипта, порядок больше не имеет значения.

  • Добавить новые параметрыoptimization.splitChunks

    Подробности:gist.GitHub.com/so преследует A/1522…

  • сам webpack удаляет устаревший код ветки

    • До: Uglify удаляет неиспользуемый код
    • Теперь: webpack удаляет неиспользуемый код (тот же случай)
    • При обнаружении кода заброшенной ветки, который содержитimport()Удаление прекратится.

• грамматика

  • import()Поддержка черных технологических аннотаций:webpackIncludeа такжеwebpackExclude.

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

  • использоватьSystem.import()выдаст предупреждение

    • ты можешь пройтиRule.parser.system:trueотключить эти предупреждения
    • ты можешь пройтиRule.parser.sustem:falseотключитьSystem.import

• настроить

  • в состоянии пройтиmodule.rules[].resolveНастроить метод парсинга. Это будет объединено с глобальной конфигурацией.
  • optimization.minimizeбыл добавлен в конфигурацию с помощью его переключателя для свертывания/сжатия.
    • Включено по умолчанию в производственном режиме, выключено по умолчанию в режиме разработки
  • optimization.minimizerВ конфигурацию добавлена ​​возможность установки обработчиков сжатия и опций.

• использовать

  • Некоторые параметры плагина были отключены
  • CLI был перенесен на webpack-cli, вам необходимо установить webpack-cli, чтобы использовать CLI
  • Плагин ProgressPlugin (--progress) теперь печатает название плагина
    • По крайней мере, для плагинов, перешедших на новую систему плагинов.

• представление

  • UglifyJs теперь кэширует и распараллеливает по умолчанию
  • Множество улучшений производительности, особенно ускорение инкрементных сборок.
  • Улучшение производительности RemoveParentModulesPlugin

• Stats

  Статистика теперь печатает иерархически вложенные модули в конкатенированные модули.

Функция

• настроить
  • Тип модуля выбирается автоматически среди расширений mjs, json и wasm. Другие расширения должны пройтиmodule.rules[].typeв конфигурации.
  • Неправильноoptions.dependenciesКонфигурация выдает ошибку.
  • sideEffectsМожно переопределить через module.rules
  • output.hashFunctionТеперь может быть настраиваемым обработчиком хэшей
    • Из соображений производительности вы можете предоставить хеш-функцию, не связанную с криптографией.
  • Добавить кoutput.globalObjectпараметр конфигурации, позволяющий выбирать ссылки на глобальные объекты во время выполнения exitCode.
• Время выполнения
  • Неправильная загрузка чанков теперь будет содержать больше информации и два новых свойства.typeа такжеrequest
• devtool
  • Убран нижний комментарий в исходных картах и ​​eval.
  • Добавлено в исходную карту evalinclude testа такжеexcludeслужба поддержки
• представление
  • AST веб-пакета может быть правильно передан в загрузчик, чтобы избежать повторного синтаксического анализа
  • Модули, которые не используются, больше не будут связаны
  • Добавьте подключаемый модуль ProfillingPlugin, который может записывать (Chrome) файлы профиля, содержащие тайминги.
  • мигрировать, сfor ofзаменятьforEach
  • мигрировать, сMapа такжеSetвместо объектов
  • мигрировать, сincludesзаменятьindexOf
  • Замените некоторые строковые методы регулярными выражениями
  • Очереди больше не запрашивают одно и то же задание дважды
  • Используйте более быстрый хэш md4 для хеширования по умолчанию
• оптимизация
  • Сокращайте имена экспортов при использовании более 25 экспортов.
  • теги script больше не добавляютсяtext/javascriptа такжеasync, так как они являются значениями по умолчанию (сохраните несколько байтов)
  • Объединенные модули генерируют меньше кода
  • Постоянная подмена теперь не требуется__webpack_require__и параметры были удалены
• По умолчанию
  • webpack теперь будет нажимать.wasm,.mjs,.js,.jsonПоиск файлов в расширенном порядке
  • output.pathinfoРежим разработки теперь включен по умолчанию
  • В рабочем режиме кеш памяти по умолчанию отключен.
  • entryТочка по умолчанию./src
  • output.pathТочка по умолчанию./dist
  • Если режим не указан, по умолчанию используется производственный режим.
• грамматика
  • Запрос ресурсов ветви контекста
  • существуетimport()Имя узла входа внутри приложения изменится с предупреждения на сообщение об ошибке.
  • Обновите acorn5 для поддержки ES2018.
• плагин
  • doneтеперь асинхронный хук

Исправление ошибок

• Создание комментария больше не будет прерываться при обнаружении символа */
• webpack больше не изменяет переданные объекты параметров
• Хук компилятора «watch-run» теперь включает сам компилятор в качестве первого аргумента.
• Добавить кoutput.chunkCallbackNameчтобы разрешить настройку шаблонов веб-воркеров
• использоватьmdoule.id/loadedМожет корректно выпрыгивать из связывания модулей (продвижение области действия)
• OccurenceOrderPlugin теперь правильно упорядочивает модули (а не наоборот)
• при звонкеWatching.invalidate, временная метка файла получена от слушателя
• исправить неправильный загрузчик постов-!поведение
• существуетMultiCompilerдобавлено вrunа такжеwatchRunкрюк
• в ЕСМthisбудетundefined
• в состоянии пройтиvar,let,constсделать правильное объявление переменной
• Парсер теперь использует тип модуляjavascript/dynamicилиjavascript/module, проанализируйте исходный код с правильным исходным кодом (модулем/скриптом).
• при встречеbuildMetaNull не ломается при отсутствии модулей
• Добавить электронную мишеньoriginal-fsмодуль
• HMRPlugin можно найти вpluginsдобавить в компилятор

Внутренние изменения

• использоватьtapзвонок на заменуpluginInvoke (новая система плагинов)
• Многие устаревшие плагины перенесены в новый API системы плагинов.
• Добавить кbuildMeta.exprotsType:defaultв json-модуль
• Удалить неиспользуемые функции в парсере (parserStringArray, parserCalculatedStringArray)
• удалить очиститьBasicEvaluatedExpressionи имеет возможность иметь несколько типов
• Замените новый буфер на Buffur.from
• Избегайте использования forEach вместо использования for of
• использоватьneo-asyncзаменятьasync
• Обновите эксплуатируемые зависимости и зависимости с расширенным разрешением до новых основных версий.
• Использование красивее

удаленные функции

• Удалитьmodule.loaders

• УдалитьloaderContext.options

• УдалитьCompliation.notCacheableотметка

• УдалитьNoErrorsPlugin

• УдалитьDependency.isEqualResource

• УдалитьNewWatchingPlugin

• УдалитьCommonsChunkPlugin

  ​

  ​

Критические изменения для плагинов/загрузчиков

• новая система плагинов
  • pluginМетоды обратно совместимы
  • Плагины должны использоватьCompiler.hooks.xxx.tap(<plugin name>, fn)
• Расширенный синтаксический анализ новой основной версии
• Шаблоны для чанков теперь могут генерировать несколько активов
• Chunk.chunks/parents/blocksТеперь это не массив. Набор используется внутри, и есть методы для доступа к нему.
• Parser.scope.renamesа такжеParser.scope.definitionsНе Объект/Массив, а Карта/Набор.
• Парсер используетStackedSetMap(структура массива в форме LevelDB) вместо массива
• Больше не устанавливается при применении плагиновCompiler.options
• Зависимости Harmony изменились из-за рефакторинга
• Dependency.getReference()теперь вернетweakАтрибуты.Dependency.weakсейчасDependencyБазовый класс использует и вgetReference()Вернул во внутреннюю базу реализацию
• Все параметры конструктораmoduleИзменять
• сливатьсяContextModuleа такжеresolveDependenciesварианты в
• изменить и переименоватьimport()зависимости внутри
• мигрироватьCompiler.resolversприбытьCompiler.resolverFactoryтак что плагин может получить доступ
• Dependency.isEqualResourceодеялоDependency.getResourceIdentifierзаменять
• TemplateМетод внутри теперь является статическим методом
• Добавьте новый класс RuntimeTemplate,outputOptionsа такжеrequestShortenerПерейти на этот курс
  • Многие методы обновлены для использования вместо них RuntimeTemplate.
  • Мы планируем переместить код, имеющий доступ к среде выполнения, в новый класс.
• Module.metaодеялоModule.buildMetaзаменять
• новыйModule.buildInfoа такжеModule.factoryMeta
• ModuleНекоторые свойства перемещены в новый объект
• добавить этот указательcontextнеобязательныйloaderContext.rootContext. Это может понадобиться загрузчикам для создания контента относительно корня программы.
• новыйthis.hotТег для контекста загрузчика, когда HMR включен
• buildMeta.harmonyодеялоbuildMeta.exportType: "namespace"заменять
• Граф чанка изменился:
  • До: Чанки связаны отношениями родитель-потомок.
  • Теперь: группы фрагментов связаны отношениями родитель-потомок, группы фрагментов содержат фрагменты.
  • Раньше: асинхронно зависимые фрагменты относятся к набору фрагментов.
  • Теперь: асинхронные зависимости относятся к одной группе фрагментов.
• file/contextTimstamps теперь являются картами
• map/foreach Chunks/Modules/Parentsметод был удален
• NormalModule получает объект параметров в конструкторе
• Добавьте необходимые параметры сборки в NormalModule
• Добавьте в NormalModuleFactorycreateGeneratorа такжеgeneratorХуки генерируются с помощью пользовательского кода
• Манифест, позволяющий настраивать рендеринг чанков с помощью хуков.