Знакомство с новыми функциями webpack4

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

Введение: webpack — это сборщик приложений JS, который объединяет каждый модуль в приложении в один или несколько файлов пакетов. С помощью загрузчиков и плагинов он может изменять, сжимать и оптимизировать все виды файлов. На его вход идут разные ресурсы, такие как: js, css, изображения, шрифты и html-файлы и т. д., а затем их вывод в файлы, которые браузеры могут нормально парсить.

Самый популярный сборщик модулей, webpack, официально выпустил версию v4.0.0 25 февраля 2018 года под кодовым названием legato. от официальногожурнал выпускаПохоже, что это основное обновление версии содержит множество новых обновлений и улучшений функций, которые упростят настройку веб-пакета. В этой статье автор всесторонне представит новые функции и практики webpack4.

Экологическая поддержка

в журнале выпускаBig changesразделе было официально объявлено, что он больше не поддерживает Node 4,Node 6Используется версия v8 5.0, которая поддерживает 93% синтаксиса ES6. Нетрудно заметить, что это решение было принято, чтобы воспользоваться преимуществами синтаксиса ES6 для написания более чистого и надежного кода.

Примечание: при использованииwebpack4, обязательно используйте версию Node.js >= 8.9.4. Поскольку webpack4 использует много нового синтаксиса JS, они оптимизированы в новой версии v8.

свойство режима

Еще одно большое изменение заключается в том, что веб-пакет должен установить свойство режима, которое может быть разработкой или производством.

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

С помощью режима вы можете легко настроить среду упаковки. Если вы установите режим разработки, вы получите лучший опыт на этапе разработки. Это благодаря функциям, предоставляемым webpack для режима разработки:

  • Инструменты отладки браузера
  • Комментарии, подробные журналы ошибок и подсказки во время разработки
  • Быстрый и оптимизированный механизм инкрементной сборки

Если вы установите режим производства, веб-пакет сосредоточится на развертывании проекта, включая следующие функции:

  • Включить весь оптимизированный код
  • меньший размер пакета
  • Удалите код, который запускается только во время разработки
  • Подъем объема и встряхивание дерева

Плагины и оптимизации

webpack4 удаляет плагин CommonsChunkPlugin, который использует встроенный APIoptimization.splitChunksа такжеoptimization.runtimeChunk, что означает, что webpack по умолчанию будет генерировать для вас общие блоки кода. Другие изменения плагина заключаются в следующем:

  • Плагин NoEmitOnErrorsPlugin устарел и заменен на оптимизацию.noEmitOnErrors, которая включена по умолчанию в рабочих средах.
  • ModuleConcatenationPlugin устарел и заменен на оптимизацию.concatenateModules, которая включена по умолчанию в производственной среде.
  • Плагин NamedModulesPlugin устарел и заменен на оптимизацию.namedModules, которая включена по умолчанию в рабочих средах.
  • uglifyjs-webpack-plugin был обновлен до версии v1.0, при этом кеширование и параллельные функции включены по умолчанию.

Готовая WebAssembly

WebAssembly (wasm) значительно улучшит производительность во время выполнения. Из-за популярности в сообществе webpack4 поддерживает его из коробки. Вы можете напрямую импортировать или экспортировать локальные модули wasm или напрямую импортировать C++, C или Rust, написав загрузчики.

Поддержка нескольких типов модулей

webpack4 поддерживает 5 типов модулей:

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

0CJS

Значение 0CJS — это конфигурация 0, а webpack4 вдохновлен инструментом упаковки Parcel, чтобы максимально снизить стоимость запуска проекта для разработчиков. Чтобы получить конфигурацию 0, webpack4 больше не является обязательным.webpack.config.jsВ качестве упакованного файла конфигурации записи его запись по умолчанию — «./src/», а выход по умолчанию — «./dist», что, несомненно, является благом для небольших проектов.

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

новая система плагинов

webpack4 внес много изменений в систему плагинов, предоставив новый API для плагинов и хуков. Изменения заключаются в следующем:

  • Все крючки изготовленыhooksОбъект управляется единообразно, и он рассматривает все хуки как расширяемые атрибуты класса.
  • При добавлении плагина необходимо указать его имя.
  • При разработке плагина вы можете выбрать sync/callback/promise в качестве типа плагина.
  • в состоянии пройтиthis.hooks = { myHook: new SyncHook(...) }Теперь, чтобы зарегистрировать крючок.

Для получения дополнительной информации о том, как работает новый плагин, см.:Как работает новая система плагинов?

Webpack5 внешний вид

В работе над webpack 5 уже есть несколько планов, в том числе следующие:

  • Более стабильная поддержка WebAssembly
  • Поддержка разработчиков для настройки типов модулей
  • Удалить плагин ExtractTextWebpackPlugig, поддержка типов модулей CSS из коробки
  • Поддержка типа модуля Html
  • постоянный кеш

наконец

Инженерное решение команды Tencent IVWEBfeflowОткрытый исходный код: домашняя страница Github: https://github.com/feflow/feflow

Если это полезно для вашей команды или проекта, пожалуйста, дайте звезду, чтобы поддержать его ~

Категории