BT

InfoQ Homepage News Introducing Webpack 5

Introducing Webpack 5

Bookmarks

Version 5.0 of Webpack, the most popular JavaScript module bundler, is finally out offering a slew of improvements, including faster build times, decreased bundle sizes, and many breaking changes. 

After the release of Webpack 4.0, the team was focused on small incremental improvements avoiding breaking changes. This often made progression 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
  • Improved bundle size with better Tree Shaking and Code Generation
  • Improved compatibility with the web platform
  • 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 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](https://blog.sindresorhus.com/webpack-5-headache-b6ac24973bf1).

The addition of [module federation](https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669) 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](https://webpack.js.org/blog/2020-10-10-webpack-5-release/). Webpack is released under the MIT license. Developers are invited to contribute to Webpack by following the [contribution guidelines](https://github.com/webpack/webpack/blob/master/CONTRIBUTING.md) and the [code of conduct](https://github.com/openjs-foundation/code-and-learn/blob/master/CODE_OF_CONDUCT.md).

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.
午夜电影_免费高清视频|高清电视|高清电影_青苹果影院