Upgrading Webpack 4 to 5

It’s been about five months since Webpack 5 was released, and most of the ecosystem plugins are ready. With some spare time, I started the project upgrade.

Key Changes in Webpack 5

1. Improved persistent caching for faster builds
2. Better tree-shaking, reducing bundle size to some extent
3. Several breaking changes to prepare for future evolution

In short, Webpack is a build tool and won’t affect the runtime functionality of your bundled JS. It’s worth upgrading.

Upgrade Steps

For full details, refer to the official docs. Here are the important steps:

1. Update Webpack and plugins to the latest versions

   Recommend using yarn upgrade-interactive to select and update in bulk—more efficient.

2. Adjust some settings

   • HtmlWebpackPlugin: the chunksSortMode option changed; set it to auto or similar
   • webpack-merge: merge is no longer the default export
   • CLI: use webpack-cli serve instead of the webpack-dev-server command

3. If your frontend code depends on Node-specific packages, either remove the dependency or install and configure browser-ready alternatives.

   • For example, my project used content-disposition. I rewrote it with browser JS instead.

Final Thoughts

• The upgrade is fairly straightforward with only a handful of changes, though there are a few gotchas.