webpack 5 has a long list of major changes. Since the last major update was already 2.5 years ago, the new version is packed with major changes that shake the foundations of the Module Bundler. The revision turned out to be so extensive that the official release notes begin with the note that v5 is not even now feature complete or free from bugs. The major release has now been made because breaking changes had to be inserted for many of the changes. However, this is not intended without a major version, which is why there have been no changes to the architecture and API in recent years. But now it is necessary to take this step. The breaking changes are correspondingly numerous.
webpack 5: Module Federation introduced
One of the long-awaited innovations in webpack 5 is the module federation. Webpack thus makes it possible to combine several separately compiled builds into a single application that is treated as a common module graph at runtime. This allows developers to work with different frameworks for individual parts of the same application. The module federation in webpack 5 has been discussed for a long time and is seen as a great relief for working with microfrontends. Manfred Steyer gives a more detailed account of this topic in the Developer. With webpack 5 there is also a separate guide to module federation available.
Node modules: No more polyfills
As already mentioned, webpack 5 has numerous other innovations. All breaking changes that have not been made in the last 2.5 years have now been integrated in one fell swoop. This also means that webpack is making a fundamental change with regard to the handling of node core modules that are not designed for the browser as a runtime environment. So far, webpack has brought polyfills for these modules, which were applied automatically so that developers could simply use the backend modules via webpack in the browser. These polyfills have now been removed so that the modules are no longer automatically available for front-end applications. In the release notes for webpack 5, the innovation is justified by that there are now enough node modules compatible with the front end and that we want to concentrate on them in the future. The previously used polyfills inflated the bundles, but in many cases were no longer necessary.
Basic camp for beginners
Get a structured and comprehensible introduction to Angular. All concepts and backgrounds easily explained online!
New: Deep-Dive for advanced users
Penetrate all of Angular’s concepts. Learn about pitfalls, misunderstandings, and deliberate limitations. As online training or on-site in Düsseldorf!
This step is controversially discussed in the community, as Sindre Sorhus expresses in an article. Sorhus points out that the change in webpack 5 will lead to an incompatibility with numerous npm packages that could previously be used in webpack without any problems. He assumes that many users will turn to the authors of the modules for a solution instead of following the suggestions of the webpack team and adding the appropriate polyfills themselves. Sorhus generally agrees that the step taken by webpack makes sense; however, he feels that the implementation has been carried out too early and criticizes the fact that the situation of the maintainers of the affected packages has not been sufficiently thought through
Experimental features in webpack 5
Other new features in webpack 5 include, for example, that support for JSON modules has been adapted to the proposal. The tree shaking options have been significantly expanded for the new version. The blog post on the release provides an overview of the numerous other new features and changes . As experimental features, there are, for example, new support for WebAssembly and the ECMAScript proposal for top-level Await. The current experimental innovations could in principle also be finalized to minor releases and be accompanied by breaking changes that are not postponed until the next major release.