Yesterday, the team behind Webpack shared all the updates we will see in its upcoming version, Webpack 5. This version improves build performance with persistent caching, introduces a new named chunk id algorithm, and more. For Webpack 5, the minimum supported Node.js version has been updated from 6 to 8.
As this version is a major release, it will come with breaking changes and users may expect some plugin to not work.
Expected features in Webpack 5
Removed Webpack 4 deprecated features
All the features that were deprecated in Webpack 4 have been removed in this version. So, when migrating to Webpack 5 ensure that your Webpack build doesn’t show any deprecation warnings. Additionally, the team has also removed IgnorePlugin and BannerPlugin that must now be passed an options object.
Automatic Node.js polyfills removed
All the versions before Webpack 4 provided polyfills for most of the Node.js core modules. These were automatically applied once a module uses any of the core modules. Using polyfills makes it easy to use modules written for Node.js, but this also increases the bundle size as huge modules get added to the bundle. To stop this, Webpack 5 removes this automatically polyfilling and focuses on frontend compatible modules.
Algorithm for deterministic chunk and module IDs
Webpack 5 comes with new algorithms for long term caching. These are enabled by default in production mode with the following configuration lines:
chunkIds: “deterministic”, moduleIds: “deterministic”
These algorithms assign short numeric IDs to modules and chunks in a deterministic way. It is recommended that you use the default values for chunkIds and moduleIds. You can also choose to use the old defaults chunkIds: “size”, moduleIds: “size”, which will generate smaller bundles, but invalidate them more often for caching.
Named Chunk IDs algorithm
A named chunk id algorithm is introduced, which is enabled by default in development mode. It gives chunks and filenames human-readable names instead of the old numeric names. The algorithm determines the chunk ID the chunk’s content. So, users no longer need to use import(/* webpackChunkName: “name” */ “module”) for debugging.To opt-out of this feature, you can change the configuration as chunkIds: “natural”.
Compiler idle and close
Starting from Webpack 5, compilers need to be closed after the use. Now, compilers enter and leave an idle state and have hooks for these states. Once compile is closed, all the remaining work should be finished as fast as possible. Then, a callback will signal that the closing has been completed.
You can read the entire changelog from the Webpack repository.
Read Next
Nuxt.js 2.0 released with a new scaffolding tool, Webpack 4 upgrade, and more!
How to create a desktop application with Electron [Tutorial]
