Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Introducing Webpack 5

Introducing Webpack 5

This item in japanese

Version 5.0 of Webpack, the most popular JavaScript module bundler, has been released and offers a slew of improvements, including faster build times and decreased bundle sizes, and also many breaking changes. 

After the release of Webpack 4.0, the team was focused on small incremental improvements in order to avoid breaking changes. This often made progress slower and added many small quirks that were needed to ensure backward compatibility.

Webpack 5.0 rethinks some core architectural decisions and focuses on the following key areas:

  • Improved performance by leveraging persistent caching and long term caching
  • Improved algorithm defaults
  • Improved bundle sizes using better Tree Shaking and Code generation
  • Improved compatibility with web platforms 
  • Improved build performance with Persistent Caching
  • Improved Long Term Caching with better algorithms and defaults
  • The clean up of internal structures left in a weird state while implementing features in v4 without introducing any breaking changes
  • Preparation for future features by introducing breaking changes now, allowing us to stay on v5 for as long as possible

Among the long list of improvements, two key changes have caught the attention of the JavaScript community: Module Federation, and the change in default behavior for the Node.js API polyfills. 

Until Webpack 5.0, Node.js APIs were automatically polyfilled. This was done in order to ensure that NPM packages that were originally aimed at Node.js (hence the name Node Package Manager) would continue to run smoothly on web browsers.

With time, NPM became the package manager of choice for client applications. Many of the packages these days are aimed specifically for web browsers, making the Node.js polyfills redundant in many cases.

While this change will decrease package sizes and, in most cases, be invisible to users, it requires all Node.js packages to add polyfills of their own or risk having their packages break on web browsers - a scenario that some package developers are not accepting lightly.

The addition of module federation to Webpack 5.0 enables applications to dynamically import code from another application at runtime. This capability is especially important to developers who use the micro front-end architecture that breaks large applications into separate modules, each using its own frameworks.

Enabling the individual modules to share code dynamically can drastically reduce bundle sizes and loading time - solving one of the biggest challenges with micro front-ends.

A full changelog can be found in the release notes. Webpack is released under the MIT license. Developers are invited to contribute to Webpack by following the contribution guidelines and the code of conduct.

Rate this Article