Webpack 4 was officially released, codenamed Legato, and includes several important updates, notably the addition of a 0 configuration feature that could be seen as a riposte to the recent Parcel fire.

You can install it using the following code:

$> yarn add webpack --dev
//or
$> npm i webpack --save-devCopy the code

Updates and improvements include:

  • Performance improved dramatically, with cases collected from official teams showing a performance improvement of 60-98%. And that’s without the addition of multicore support and persistent caching, which means there’s room for performance improvements.

  • New mode configuration, optionally set to Development or production, default to production, the main difference is that development is more focused on build time, while production is more focused on size. In addition, with mode, it can be started without configuration, realizing zero configuration.

  • Using the optimize. SplitChunks and optimization. Alternative CommonsChunkPlugin runtimeChunk. It is now easier for developers to split code and extract common code.

  • WebAssembly support, you can now import files in other languages supported by WebAssembly.

  • Support CommonJS, AMD, ESM and other module systems, you can directly import. MJS extension module file, wASM module also has experimental support.

CLI tools for many of the major front-end frameworks will be actively following this upgrade, with the new Angular release coming in the next few weeks directly integrating Webpack 4.

It should be noted that this upgrade is a destructive upgrade for many plugins and loaders. Before, the official team left some time for ecological partners to adapt to this upgrade, but some failed to do so. For example, HtmlWebpackPlugin temporarily failed to synchronize the upgrade. The Webpack team created a fork for it to support version 4.0 using:

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-pluginCopy the code

See the release notes for additional updates:

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

The Webpack team has also written a series of introductory articles about these new features, which you can read at:

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