Знакомство с новыми функциями webpack 4.0.0-beta.0

внешний интерфейс Командная строка JavaScript Webpack
Знакомство с новыми функциями webpack 4.0.0-beta.0

此处输入图片的描述
В последние годы front-end технологии растут как грибы после весеннего дождя, и мы также постоянно учимся и растем в рамках этого тренда. Непрерывное развитие передовых технологий предоставило нам много удобства. Например: появление JSX дает нам ясный и интуитивно понятный способ описания дерева компонентов, появление LESS/SASS улучшает наши возможности по написанию css, AMD/CommonJS/ES6. Появление модульной разработки обеспечивает удобство для нас. Однако нам нужно использовать другие инструменты для преобразования этих инструментов в родной язык для работы в браузере. Чтобы лучше интегрировать эти разные ресурсы, нам нужен инструмент для упаковки, и webpack является продуктом этого требования.
webpack можно рассматривать как сборщик модулей. Что он делает: анализирует структуру вашего проекта, находит модули JavaScript и другие языки расширения (Scss, TypeScript и т. д.), которые браузеры не могут запускать напрямую, и упаковывает их в подходящий формат для использования браузерами. В настоящее время webpack выпустил в общей сложности три стабильные версии. Начиная с конца августа 2017 года, после пятимесячного цикла разработки, webpack Команда недавно выпустила бета-версию webpack 4.0.0, добавив множество новых функций, исправлений и исправлений ошибок. Если вас интересует webpack, давайте узнаем о новых возможностях webpack 4.0.0-beta.0.
P.S. Весь приведенный ниже демонстрационный код основан на webpack 4.0.0-beta.0.

1. Установите веб-пакет v4.0.0-beta.0.

Если вы используете пряжу:

yarn add webpack@next webpack-cli --dev

Если вы используете нпм:

npm install webpack@next webpack-cli --save-dev

2. Внедрение новых функций webpack 4.0.0.beta.0

Ниже приведены некоторые новые функции, которые наверняка вас заинтересуют. Если вы все еще не удовлетворены после прочтения этой главы, вы можете просмотреть полнуюchangelog.
В этой главе будет представлен веб-пакет 4.0.0-beta.0 из следующих разделов.

2.1 Окружающая среда

Обновление среды выполнения Webpack. Node.js версии 4 больше не поддерживается. Исходный код обновлен до более высокой версии ECMAScript.

В соответствии с конфигурацией webpack package.json отображается минимальная поддерживаемая версия Node.js: "node": ">=6.11.5"

2.2 Модули

Типы модулей webpack и поддержка .mjs:
Долгое время JS был единственным типом модуля в webapck. Из-за этого разработчики не могут эффективно упаковывать другие типы файлов. На данный момент в webpack реализовано пять типов модулей, каждый из которых имеет свои преимущества и может использоваться по мере необходимости (подробнее об этом позже).

  • javascript/auto: (по умолчанию в webpack3) поддерживает все модульные системы JS: CommonJS, AMD, ESM.
  • javascript/esm: модули EcmaScript, все остальные модульные системы недоступны (по умолчанию в файлах .mjs).
  • javascript/dynamic: EcmaScript не поддерживает CommonJS и модули.
  • json: данные JSON, которые можно импортировать с помощью require и import (по умолчанию для файлов .json).
  • webassembly/experimental: режим WebAssembly (в настоящее время экспериментальный, по умолчанию для файлов .wasm).

Применение:
Тип в module.rules — это недавно добавленный атрибут для поддержки различных типов модулей.

 module: {
    rules: [{
        test: /\.special\.json$/,
        type: "javascript/auto",
        use: "special-loader"
    }]
 }

Кроме того, webpack теперь разрешается в порядке расширения .wasm, .mjs, .js и .json.

javascript/esmв сравнении сjavascript/autoОбработка ESM более строгая:
Это проявляется в двух аспектах: 1. Импортируемое имя должно существовать в импортируемом модуле. 2. Динамические модули (не ESM, такие как CommonJS) могут быть импортированы только через импорт по умолчанию, а все остальные импорты (включая импорт пространств имен) сообщат об ошибке.

2.3 Использование

  • В "Разработке или производстве" должен быть выбран режим (есть скрытый режим none, отключающий все).
    1) Рабочий режим не поддерживает мониторинг, а режим разработки оптимизирован для быстрой инкрементальной перестройки.
    2) Рабочий режим также поддерживает конкатенацию модулей, то есть продвижение переменных (эта функция реализована в вебпаке 3).
    3) Комментарии и подсказки поддерживаются в режиме разработки, а также поддерживаются исходные карты eval.
  • Чтобы переместить CLI в webpack-cli, вам нужно использовать CLI, установив webpack-cli.
  • Вы можете настроить свой собственный режим, используя флаги оптимизации.*.
  • webpackInclude и webpackExclude могут поддерживать import() с волшебными аннотациями, которые позволяют фильтровать файлы при использовании динамических выражений.
  • Использование System.import() выдаст предупреждение:
    1) Предупреждение можно отключить с помощью Rule.parser.system:true .
    2) Вы также можете отключить System.import() с помощью Rule.parser.system:false .
  • Для плагинов, перенесенных в новую систему плагинов, ProgressPlugin теперь отображает имя плагина.
  • webpack теперь может обрабатывать JSON нативно. Если вы используете загрузчик для преобразования json в js, вам необходимо установить: type: "javascript/auto". Конечно, веб-пакет будет работать и без загрузчика.

2.4 Конфигурация

  • Удалены некоторые распространенные встроенные функции:
    1) NoEmitOnErrorsPlugin -> оптимизация.noEmitOnErrors (по умолчанию в рабочем режиме).
    2) ModuleConcatenationPlugin -> оптимизация.concatenateModules (по умолчанию в рабочем режиме).
    3) NamedModulesPlugin -> оптимизация.namedModules (по умолчанию в режиме разработки).
    Удален часто используемый CommonsChunkPlugin. -> Optimization.splitChunks Для тех, кому нужен детальный контроль над стратегией кэширования, доступны Optimization.splitChunks и Optimization.runtimeChunk. Разрешение теперь можно настроить с помощью module.rules[].resolve. Он объединен с глобальной конфигурацией.
  • optimization.minimize Переключиться на управление свертыванием. Рабочий режим включен по умолчанию, режим разработки выключен по умолчанию.
  • Оптимизация.minimizer используется для настройки минимизаторов и опций.
  • Многие параметры конфигурации, которые поддерживают заполнители, теперь также поддерживают формы функций.
  • Неправильная конфигурация options.dependencies теперь будет вызывать исключение.
  • sideEffects можно переопределить через module.rules.
  • Добавлен параметр конфигурации output.globalObject, позволяющий выбирать ссылки на глобальные объекты во время выполнения.
  • Нет необходимости явно задавать атрибуты записи и вывода.По умолчанию webpack устанавливает атрибут записи в ./src и атрибут вывода в ./dist.
  • Удалить модуль.загрузчики.

2.5 Оптимизация

  • uglifyjs-webpack-plugin обновлен до версии 1 и поддерживает синтаксис ES6.
  • sideEffects:false можно настроить в package.json. Когда это поле установлено, флаг не имеет побочных эффектов в используемой библиотеке. Это означает, что webpack может безопасно очистить код от любого реэкспорта.
  • Используйте массивы JSONP вместо функций JSONP -> поддержка асинхронности.
  • Внедрить новую опциюoptimization.splitChunks.
  • Webpack может удалять бесполезный код. Ранее Uglify удалял бесполезный код. Теперь webpack также может удалять бесполезный код. Это эффективно предотвращает сбои, возникающие после импорта бесполезного кода.
    Вот некоторые внутренние оптимизации:
    1) Замените вызовы плагинов вызовами крана (новая система плагинов).
    2) Перенесите многие устаревшие плагины на новый API системы плагинов.
    3) Добавьте buildMeta.exportsType:default для модуля json.
    4) Удален парсер (parserStringArray, метод, не используемый в parserCalculatedStringArray).

2.6 Производительность

  • По умолчанию UglifyJS по умолчанию использует кэширование и распараллеливание (не полностью реализовано, веха webpack5).
  • Вышла новая версия системы плагинов, поэтому хуки и обработчики событий стали монолитными.
  • Многочисленные улучшения производительности, особенно более быстрые добавочные перестроения.
  • Улучшена производительность RemoveParentModluesPlugin.

2.7 Несовместимые изменения (связанные с плагином, загрузчиком)

  • Новая система плагинов:
    1) Метод плагина обратно совместим
    2) Плагин теперь должен использоваться такCompiler.hooks.xxx.tap(<plugin name>, fn)
  • Chunk.chunks/parents/blocksБольше не массив. Используйте коллекцию внутри и используйте методы для доступа к ней.
  • Parser.scope.renamesа такжеParser.scope.definitionsБольше не объект/массив, а карта/набор.
  • Парсер используетStackedSetMap(аналогично структуре данных LevelDB) вместо массива.
  • Больше не устанавливается при применении плагиновCompiler.options.
  • Изменились параметры конструкции всех модулей.
  • БудуoptionsОбъединить вContextModuleа такжеresolveDependenciesизoptionsв объекте.
  • изменить и переименоватьimport()зависимости
  • БудуCompiler.resolversВставьте доступный плагинCompiler.resolverFactoryсередина.
  • Dependency.isEqualResourceбыл заменен наDependency.getResourceIdentifier
  • TemplateВсе методы статичны.
  • был добавлен новыйRuntimeTemplateДобрый,outputOptionsа такжеrequestShortenerбыл переведен в этот класс.
    1) Многие методы были обновлены для заменыRuntimeTemplateиспользование.
    2) Мы планируем переместить код, который обращается к среде выполнения, в этот новый класс.
  • Module.meta заменен на Module.buildMeta.
  • Добавлены Module.buildInfo и Module.factoryMeta.
  • Некоторые свойства модуля были перенесены в новый объект
  • Добавить точки в параметр контекстаloaderContext.rootContext.loadersЭто можно использовать для создания вещей относительно корня приложения.
  • Когда HMR включен,this.hotФлаги добавляются в контекст загрузчика.
  • buildMeta.harmonyбыл заменен наbuildMeta.exportsType：namespace.
  • График Chunk изменился:
    Ранее: соединение чанков было связано с вложенными зависимостями.
    Теперь: соединение ChunksGroups относительно ссылочных зависимостей, объединенных по порядку.
    Раньше: AsyncDependenciesBlocks ссылались на список фрагментов по порядку.
    Теперь: AsyncDependenciesBlocks ссылается на ChunkGroup.

★★ Примечание. Вышеупомянутый контент посвящен основным изменениям в загрузчиках и плагинах.

3. Основные сведения об обновлении

3.1 Лучшие настройки по умолчанию

До сегодняшнего дня веб-пакет всегда требовал явной настройкиentryа такжеoutputАтрибуты. В webpack 4.0.0-beta.0, webpack автоматически установитentryсобственность./srcтак же какoutputСобственность./dist.
это значит тыБольше не требуются файлы конфигурациидля запуска вебпака. Далее мы продемонстрируем вам веб-пакет Удобная работа для 4.0.0-beta.0:

1. После того, как нам нужно установить webpack, добавьте следующий скрипт в package.json для запуска:

 "scripts": {
    "build": "webpack"
 },

2. Добавьте в проект простой пример кода, как показано ниже (весь проект может запускаться и упаковываться без файла конфигурации веб-пакета):

无配置示例

3. В процессе упаковки мы обнаружили намеки на новые функции:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Об этом мы поговорим в следующем разделеНастройки режима.

★★ Примечание. По умолчанию запись./srcЕсли эта папка отсутствует, будет сообщено об ошибке!

> webpack --mode production
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\workspace\github\Webpack-Example'

3.2 Настройки режима

В прошлом проекты, использующие скаффолдинг webpack3 для создания исходных шаблонов проекта, имели два или даже три файла конфигурации, например
webpack.base.conf.js,webpack.prod.conf.js,webpack.dev.conf.jsИ теперь вам не нужен файл конфигурации, передайте параметр прямо в команде запуска--mode development | productionдобиться эффекта различения разных режимов.

Затем измените package.json, чтобы установить разные режимы:

 "scripts": {
     "dev": "webpack --mode development",
     "build": "webpack --mode production"
 },

сделай это сноваnpm run devилиnpm run buildВы можете увидеть различные результаты упаковки:
不同模式打包
Мы видим, что результаты двух режимов совершенно разные.Ниже мы объясним некоторые общие конфигурации более подробно в соответствии с нашими реальными потребностями.

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

  • пройти черезentryРазделяйте разные записи, часто используемые в многостраничных приложениях;
  • пройти черезCommonsChunkPluginПлагины для разделения разных функциональных модулей;
  • через динамическийimportделить.

Ниже мы в основном объясняем основные изменения в удаленной версии webpack 4.0.0-beta.0.CommonsChunkPluginплагин.

3.3 Удалить плагин CommonsChunk

веб-пакет 4.0.0-бета.0 удаленCommonsChunkPlugin, для поддержки двух новых опций (optimization.splitChunksа такжеoptimization.runtimeChunk).

Разделение с веб-пакета 4.0.0-beta.0Chunkне будет использоватьсяCommonsChunkPluginплагин, вместо этого используйтеoptimizationЭлемент конфигурации, конкретный принцип реализации может относиться кCommonsChunkPlugin.

Поскольку официального официального документа нет, вот что мы пришли на практике.optimizationМетод конфигурации:
который использует недавно добавленныйsplitChunksАтрибут, этот атрибут можно понимать буквально как вариант разделения блоков кода, а настраиваемые элементы под ним перечислены в следующем примере кода (заинтересованные друзья могут потренироваться сами):

entry: {
     vendor: ['lodash']
},
 
...
 
optimization: {
     splitChunks: {
     chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async" 
     minSize: 0, // 最小尺寸，默认0
     minChunks: 1, // 最小 chunk ，默认1
     maxAsyncRequests: 1, // 最大异步请求数， 默认1
     maxInitialRequests : 1, // 最大初始化请求书，默认1
     name: function(){}, // 名称，此选项可接收 function
     cacheGroups:{ // 这里开始设置缓存的 chunks
         priority: 0, // 缓存组优先级
         vendor: { // key 为entry中定义的 入口名称
             chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步) 
             test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
             name: "vendor", // 要缓存的 分隔出来的 chunk 名称 
             minSize: 0,
             minChunks: 1,
             enforce: true,
             maxAsyncRequests: 1, // 最大异步请求数， 默认1
             maxInitialRequests : 1, // 最大初始化请求书，默认1
             reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
         }
     }
  }
 },

Вышеупомянутоеoptimization.splitChunksвсех доступных свойств элемента конфигурации.

Суммировать

Выше перечислены новые функции webpack 4.0.0-beta.0, с которыми мы изначально разобрались, включая некоторые переводы официального журнала изменений, а также некоторые свойства, которые мы протестировали сами. Конечно, если вы заинтересованы, вы также можете дождаться выхода официальной официальной документации для практики.
Если приведенная выше информация не полностью удовлетворяет ваш интерес, обратите внимание также на официальный журнал. Менее чем через месяц webpack проведет более тщательное тестирование плагинов, загрузчиков и всей экосистемы и выпустит финальную официальную стабильную версию. Если вам нравится webpack, вы можете принять участие в webpack 4.0.0-beta.0. Чем больше проблем будет найдено и решено на этапе тестирования, тем стабильнее будет официальная версия.

образец кода

Интерфейс JD.com

Расширенное чтение

Бета-версия webpack 4 — попробуйте сегодня! , Шон Т. Ларкин

webpack v4.0.0-beta.0 release . Tobias Koppers

webpack 4.0.0-alpha.5 feedback . Tobias Koppers

Эта статья была написана совместно Jianhui и Kaiyuan.

Категории