От автора: недавно на JS сообщество снизошли новости о новой версии Webpack – Webpack 4. Эта версия предлагает мощные функции и улучшения, которые действительно упростят процесс разработки. Если вы не знаете про webpack и зачем он нужен (да где вы были?), то Webpack можно просто описать, как создатель статичных модулей для современных JS приложений. Он помогает собирать все модули и запаковывать их в один или несколько пакетов. Давайте разберем пару новых функций и улучшений в Webpack 4.
Скорость
Благодаря улучшению производительности, Webpack 4 гарантирует прирост скорости создания билда до 98%. Я испытал это на существующем Webpack проекте под управлением Webpack 3, и прирост был двойным. Вы можете это проверить. Чтобы начать работу с Webpack 4, установите его в свой проект через yarn или npm.
npm i webpack webpack-cli --save-dev
или
yarn add webpack webpack-cli --dev
Это все, что нужно, чтобы начать использовать последнюю версию. Ниже показаны скриншоты времени создания билда проектов для Webpack 3 и 4.
webpack 3 — 1530ms
webpack 4 — 865ms
Поддержка сред
В заметках к релизу Webpack анонсировал отказ от поддержки Node 4 – это считается большими изменениями. Решение было принято в пользу современного синтаксиса ES6, который делает код чище и стабильнее. Важно отметить, что проекты под управлением старых версий Webpack могут потерять в производительности из-за использования современного синтаксиса.
Свойство mode
Одно из больших изменений в Webpack. В Webpack появилось свойство mode, позволяющее легко устанавливать тип среды, для которой ведется работа development и production. У каждого варианта свои плюсы и случаи использования.
Значение development позволяет сосредоточиться на создании, предоставляя лучший UX разработки, благодаря таким функциям как:
Инструменты для отладки в браузере
Комментарии, детальные сообщения об ошибках и подсказки для разработки
Быстрое и оптимизированное повторное создание билда
Значение procuction предлагает лучший выбор и значения по умолчанию, необходимые для развертки проекта:
Оптимизации для генерации оптимизированных пакетов
Конкатенация модулей (поднятие области видимости)
Уменьшенный выходной размер
Удаление кода, предназначенного только для разработки
Webpack всегда будет выбрасывать ошибку, если mode не установлен (см. скриншот ниже).
Можете установить mode в значения development или production в файле webpack.config.js.
module.exports = { mode: 'development'
}
Или
module.exports = { mode: 'production'
}
Свойство mode принимает также значение none, если вам необходимо отключить ошибки, выброшенные Webpack.
Плагины и оптимизация
Из Webpack 4 был удален CommonsChunkPlugin. Его заменили на ряд настроек по умолчанию и API optimization.splitChunks и optimization.runtimeChunk. Это значит, что теперь вы получаете автоматически генерируемые общие куски. В версии 4 также устарело еще несколько плагинов.
NoEmitOnErrorsPlugin устарел, его заменил optimization.noEmitOnErrors. Установлен по умолчанию в режиме production
ModuleConcatenationPlugin устарел, его заменил optimization.concatenateModules. Установлен по умолчанию в режиме production
NamedModulesPlugin устарел, его заменил optimization.namedModules. Установлен по умолчанию в режиме production
В целях улучшения производительности и максимальной оптимизации UglifyJs теперь кэширует и парализует по умолчанию в Webpack 4.
Новые типы модулей
Теперь Webpack поддерживает типы модулей:
javascript/auto: (по умолчанию в Webpack 3) JS модуль со всеми включенными системами модулей: CommonJS, AMD, ESM
javascript/esm: EcmaScript модули, все другие системы модулей не доступны
javascript/dynamic: не доступны только CommonJS и EcmaScript
json: JSON данные, доступны через require и import
webassembly/experimental: WebAssembly модули (сейчас экспериментальные)
javascript/auto был модулем по умолчанию в Webpack 3, но Webpack 4 полностью абстрагировал JS специфичность от кода, чтобы пользователи могли сами выбрать необходимый модуль.
Также Webpack будет искать расширения .wasm, .mjs, .js и .json в указанном порядке.
0CJS
0CJS означает приложение Zero Config. Идея заключается в том, что для запуска JS проекта необходим минимум или ноль настроек. Это предпосылка для относительно нового упаковщика Parcel. Чтобы начать создание приложения, не нужно создавать конфиг файл.
В версии 4 появилась платформа для zero config. То есть файл webpack.config.js будет не нужен.
Вам лишь нужен файл ./src/index.js. И теперь при запуске команды webpack в терминале, Webpack будет знать, что указанный файл является точкой входа для приложения. Удобно для маленьких проектов.
Другие обновления
Теперь Webpack сам удаляет мертвые ветки. Раньше этим занимался Uglify, но теперь мертвый код удаляет сам Webpack.
import() теперь поддерживает webpackInclude и webpackExclude как магический комментарий. Это позволяет фильтровать файлы при использовании динамического выражения.
Использование System.import() теперь получает предупреждение. Рекомендуется использовать import().
Теперь UglifyJs кэширует и парализует по умолчанию.
Улучшение производительности для RemoveParentModulesPlugin.
Теги script больше не text/javascript и async. Это значения по умолчанию (экономит пару байт)
Это лишь некоторые из множества функций Webpack 4. Обновлений и улучшений еще так много:
HTML/CSS модули. То есть теперь можно использовать HTML/CSS файл, как точку входа.
Постоянное кэширование.
Многопоточность и многоядерность.
Поддержка WebAssembly передвинута с экспериментальной в стабильную.
По ссылке можно посмотреть полный релиз лог по Webpack 4.
Автор: Yomi Eluwande
Источник: https://scotch.io/
Редакция: Команда webformyself.