Официально выпущен Webpack 4, позволяющий запускать без конфигурации

внешний интерфейс Командная строка Medium Webpack

Официальный выпуск Webpack 4 под кодовым названием Legato включает в себя ряд важных обновлений, особенно добавление функций конфигурации 0, что можно рассматривать как мощную контратаку на Parcel, который был популярен некоторое время назад.

Вы можете установить с помощью следующего кода:

$> yarn add webpack --dev
//or
$> npm i webpack --save-devскопировать код

Обновления и улучшения включают в себя:

  • Производительность была значительно улучшена.Кейсы, собранные официальной командой, показывают, что производительность улучшилась с 60% до 98%. И это без добавления многоядерной поддержки и постоянного кеша, а значит есть возможности для повышения производительности.

  • Добавлена ​​новая конфигурация режима, которую можно установить на разработку или производство.Значение по умолчанию - производство.Основное различие между ними заключается в том, что разработка уделяет больше внимания времени сборки, а производство больше внимания уделяет размеру. И, с режимом, его можно запустить без настройки, добившись нулевой конфигурации.

  • Используйте Optimize.splitChunks и Optimization.runtimeChunk вместо CommonsChunkPlugin. Теперь разработчики могут более легко реализовать такие операции, как разделение кода и извлечение общего кода.

  • Поддерживается WebAssembly, и теперь можно импортировать файлы на других языках, поддерживаемых WebAssembly.

  • Поддержка CommonJS, AMD, ESM и других модульных систем, возможность прямого импорта файлов модулей с расширением .mjs и экспериментальная поддержка модулей wasm.

Инструменты командной строки многих основных интерфейсных фреймворков будут активно следовать этому обновлению, а новая версия Angular, которая будет выпущена через несколько недель, будет напрямую интегрировать Webpack 4.

Следует отметить, что это обновление является разрушительным обновлением для многих плагинов и загрузчиков.Ранее официальная команда оставляла некоторое время экологическим партнерам для адаптации к этому обновлению, но некоторые этого не сделали, например HtmlWebpackPlugin временно не удалось синхронно обновиться, команда Webpack создала форк для поддержки версии 4.0, используйте:

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-pluginскопировать код

Дополнительные сведения об обновлении можно найти в примечаниях к выпуску:

https://github.com/webpack/webpack/releases/tag/v4.0.0

Команда Webpack также написала серию вводных статей для этих новых функций, которые вы можете прочитать:

https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Категории