Webpack, the most popular JavaScript module bundler, released version 4.0 on Sunday, February 25th. This version contains a complete rewrite of the plugin system, new first class module types including support for WebAssembly, simplified configuration options, and much more. The update also comes with big performance improvements, with reports of anywhere from 60% to 98% reduction in build time.
One of the major improvements included in the 4.0 release is the simplification of configuration files required. One of the main arguments used in favor of competing module bundler parcel.js was the lack of required configuration. With this release, webpack introduces a minimized, mode-based configuration and defaults allowing the use of webpack without a configuration file at all. Prosper Otemuyiwa explains the significance on a post on the Auth0 blog:
Before now, an entry point had to be defined inside a webpack.config.js file for Webpack to bundle your app. However, with Webpack 4, there is no need to define the entry point, it will take ./src/index.js as the default.
Furthermore, there's also no need to define the output file, it emits the bundle to /.dist/main.js.
The significance of this slick feature comes to play when spinning up small projects. No need for a configuration file. Just webpack away!
The release also includes a complete rewrite of the plugin system, primarily for performance reasons. In a post about the new system, webpack core developer Tobias Koppers explained the motivation:
The plugin system is a core component of webpack. This means plugin hooks are called pretty often. Many of the hooks are in the hot path.
But the current version of the plugin system is written in a very generic way using arguments for any number of arguments and loops to cover any number of plugins from zero to many. The same code is used for every hook. This makes calling plugins polymorphic and difficult to optimize.
The new system brings a much more explicit and easy to optimize API, allowing higher performance, better profiling, and easier integration into type systems like Typescript and Flow.
The 4.0 release was available in beta for a month to allow plugin developers to update their systems, but not everything has been updated. Developers looking to update a plugin or loader can reference the plugin migration guide. Additionally, developers using the popular HTMLWebpackPlugin should check out the release blog post for a patched version, as the core maintainer has been away and the webpack team is providing a compatible version in the interim.
Another massive improvement in the release is the support of multiple first-class module types, including experimental support for WebAssembly. Support for WebAssembly in webpack has been underway since July 2017, when the team was awarded a grant from the Mozilla Open Source Support program. In the announcement post about the grant, Sean Larkin of the webpack team laid out the goal:
To take it a step further we want you to be able to just drop in any Rust, C++, C file into your project, and then use it like a JavaScript module.
With this release, that goal has begun to be realized. You can already npm install a Rust loader, and C++ loader, allowing drop-in support for ⅔ of the named languages.
Even developers not wishing to take advantage of the new features may wish to update to webpack 4.0, as it comes with a massive performance increase. An informal twitter survey turned up improvements as high as 75% with twitter user Evan Scott reporting a 74% improvement in build time from 3680ms1 to 9632ms, and twitter user Arkaitz Garro reporting a 65% improvement from 42730ms to 15179ms.
A full changelog of everything that has changed can be found in the release notes. It should be noted that this release also splits out the webpack CLI into a separate webpack-cli node package, so if using it outside of a build system you will need to install a new package. Developers wishing to get started with webpack 4.0 can install using npm i webpack webpack-cli --save-dev.
