Руководство по неполной миграции Webpack 4

Node.js внешний интерфейс JavaScript Webpack

существуетвыпущен вебпак 3После этого команда webpack пообещала сообществу, что будет длительный и стабильный цикл разработки для последующих итераций основной версии webpack. А в августе 2017 года команда webpack начала сmasterветка вырезанаnextВетка используется для разработки webpack 4 после 5-месячного цикла разработки.webpack 4.0-betaОн был выпущен в январе 2018 года, что не только выполнило предыдущее обещание, но также принесло много новых функций и внесло множество улучшений в пользовательский интерфейс.

Установить

Если вам нужно использовать webpack 4, вам нужно начать сnextУстановить на ветке:

// yarn
yarn add webpack@next webpack-cli --dev

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

Неполное руководство по миграции на север

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

Node.js 4 больше не поддерживается.

согласно сpackage.jsonконфигурации минимальная поддерживаемая версия Node.js:6.11.5

тип модуля

До веб-пакета 4 js был единственным типом модуля в веб-пакете и, следовательно, не мог эффективно упаковывать другие типы файлов. И webpack 4 предоставляет 5 типов модулей:

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

Кроме того, webpack 4 разрешает по умолчанию.wasm, .mjs, .jsа также.jsonфайл с суффиксом.

В конфигурации загрузчика соответствующего файла нужно добавитьtypeполе для указания типа модуля:

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

javascript/auto / javascript/esmОба могут обрабатывать ESM, но последний более строгий:

  • Импортированное имя должно существовать в импортируемом модуле.
  • Динамические модули (не ESM, такие как CommonJS) могут передаваться только по умолчанию.importИмпорт, импорт другими способами (включая пространство имен) сообщит об ошибке

Для модулей WebAssembly:

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

import(): динамический импорт

В вебпаке 4,import()вернет пространство имен с (namespace), что не влияет на модуль ES, но не следуетcommonjsСтандартный модуль добавит слой обертывания:

// webpack 2/3
import("./commonjs").then(exports => {
    ...
})

// webpack 4
import("./commonjs").then({default: exports}=> {
    ...
})

mode: конфигурация режима

mode— это недавно добавленная опция параметра в webpack 4, которая имеет два необязательных значения:productionа такжеdevelopment.modeНе по умолчанию, вам нужно выбрать один из двух:

  1. productionмодель:
    • Предоставляет все возможные оптимизации по умолчанию, такие как сжатие кода/расширение области действия и т. д.
    • не поддерживаетсяwatching
    • process.env.NODE_ENVЗначение не нужно определять снова, значение по умолчанию равноproduction 
   /** webpack.production.config.js **/
   // webpack 2/3 
   module.exports = {
       plugins: [
        new UglifyJsPlugin(/* ... */),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
       ]
     }
     
   // webpack 4  
   module.exports = {
    mode: 'production'
   }
  1. developmentмодель:
    • В основном оптимизирована инкрементальная скорость сборки и опыт разработки.
    • process.env.NODE_ENVЗначение не нужно определять снова, значение по умолчанию равноdevelopment
    • Примечания и советы поддерживают режим разработки и поддерживает исходные карты в рамках Eval
   /** webpack.development.config.js **/
   // webpack 2/3 
   module.exports = {
       plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
       ]
     }
     
   // webpack 4  
   module.exports = {
    mode: 'development'
   }

Кроме того, webpack 4 предоставляет скрытый (none) режим, который отключает все оптимизации

настройка побочных эффектов

вебпак 4 дюймаpackage.jsonпредставил паруsideEffects: falseслужба поддержки. когда модульpackage.jsonДобавление этого поля в , указывает на то, что модуль не имеет побочных эффектов, а это значит, что webpack может безопасно очищать код, который используется для реэкспорта.

JSON

Webpack 4 поддерживает не только нативную обработку JSON, но и Tree Shaking для JSON. При использовании синтаксиса ESMimportjson, webpack удалит неиспользуемый экспорт в модуле JSON.

Кроме того, если вы хотите преобразовать json в js с помощью загрузчика, вам нужно установитьtypeдляjavascript/auto:

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

настроить

  • Удалены некоторые распространенные встроенные функции:
    • NoEmitOnErrorsPlugin -> оптимизация.noEmitOnErrors (по умолчанию в рабочем режиме)
    • ModuleConcatenationPlugin -> оптимизация.concatenateModules (по умолчанию для производственного режима)
    • NamedModulesPlugin -> оптимизация.namedModules (по умолчанию в режиме разработки).
    • Удален CommonsChunkPlugin и заменен наoptimization.splitChunksа такжеoptimization.runtimeChunk, который обеспечивает детальное управление политиками кэширования.
  • можно использоватьmodule.rules[].resolveнастроить синтаксический анализ, который объединен с глобальной конфигурацией.
  • optimization.minimizeПереключитесь на свертывание элементов управления. Рабочий режим включен по умолчанию, режим разработки выключен по умолчанию.
  • optimization.minimizerИспользуется для настройки минимизаторов и опций.
  • Многие параметры конфигурации, которые поддерживают заполнители, теперь также поддерживают функциональные формы.
  • Неправильноoptions.dependenciesКонфигурация сообщит об ошибке
  • sideEffectsв состоянии пройтиmodule.rulesпокрытие
  • output.hashFunctionМожет быть конструктором для настройки хеш-функции. По соображениям производительности также могут быть предоставлены некриптографические хэш-функции.
  • output.globalObjectСсылка на глобальный объект, которую можно использовать для настройки среды выполнения.
  • распределение по умолчанию
    • веб-пакет по умолчанию.wasm, .mjs, .jsа также.jsonНайдите модули в порядке расширения.
    • output.pathinfoОн включен по умолчанию в режиме разработки
    • В рабочей среде кэш памяти по умолчанию отключен.
    • entryЗначение по умолчанию./src,output.pathЗначение по умолчанию./dist
    • При выборе параметра режима значение по умолчанию равноproduction

оптимизация

  • uglifyjs-webpack-pluginВыпуск v1, поддержка ES2015
  • Используйте массивы JSONP вместо функций JSONP -> поддержка асинхронности
  • Сам webpack также может удалять мертвый код. В webpack 2/3 бесполезный код удаляется при использовании Uglify, а в webpack 4 webpack также может (в некоторых случаях) удалять бесполезный код, чтобы избежатьimport()Сбой при ссылке на бесполезный код
  • Модули с заданной областью действия будут генерировать меньше кода

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

  • По умолчанию UglifyJS будет кешировать и распараллеливать по умолчанию (полная реализация кеширования и распараллеливания будет реализована в webpack 5)
  • Несколько улучшений производительности, особенно в инкрементных сборках
  • улучшенRemoveParentModluesPluginпредставление
  • Неиспользуемые модули больше не имеют ненужного подъема прицела.
  • Добавьте ProfilingPlugin, этот плагин (в браузере Chrome) создаст файл, содержащий время, затрачиваемое каждым плагином.
  • for ofзаменятьforEach;Map/SetзаменятьObjects;includesзаменятьindexOf
  • Одна и та же задача будет поставлена ​​в очередь только один раз

Полный список улучшений производительности и оптимизаций можно найти здесь.Release 4.0-beta.0

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

  • удаленныйmodule.loaders
  • удаленныйloaderContext.options
  • удаленныйCompilation.notCacheable
  • удаленныйNoErrorsPlugin
  • удаленныйDependency.isEqualResource
  • удаленныйNewWatchingPlugin
  • удаленныйCommonsChunkPlugin

связанные ресурсы

Категории