Webpack 5: deterministic output, better build performance and caching

[slorber]

🚀 Feature

We should upgrade to Webpack 5 for various reasons

(just creating the issue to reference it in blog post).

Related to this issue with undeterministic static output: #3383

[RDIL]

I'd be happy to take this.
Edit: I don't have the time at the moment, but I'll try in the near future.

[slorber]

It's something I wanted to work on just after the i18n release, so tell me on discord if you give it a try :)

I think we can split the work in multiple parts, like the minimum upgrade, and another PR for perf/caching improvements

[semoal]

If It's useful for anyone, I reviewed the dependencies that are related to webpack:

library	actual version	compatible?
"@endiliey/static-site-generator-webpack-plugin	^4.0.0",	Unknown, probably works
"@svgr/webpack	^5.5.0",	Unknown, probably works
"copy-webpack-plugin	^6.3.0",	^7.0.0 ok
"html-webpack-plugin	^4.5.0",	^5@beta ok
"optimize-css-assets-webpack-plugin	^5.0.4",	For webpack v5 or above please use [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) instead.
"pnp-webpack-plugin	^1.6.4",	Unknown, probably works
"terser-webpack-plugin	^4.1.0",	^5.1.1 ok
"webpack	^4.44.1",	^5.x.x
"webpack-bundle-analyzer	^3.6.1",	^4.3.0 ok
"webpack-dev-server	^3.11.0",	not required since v5
"webpack-merge	^4.2.2",	Unknown, probably works
webpackbar	^5.0.0-3	has changes in one commit for fixing some bugs with webpack 5, probably works with actual version

[RDIL]

Progress report

In my PR, I have successfully repaired development and production builds.

Dependencies

This change requires updating a ton of dependencies. It has also added, removed and changed a few, such as:

- pnp-webpack-plugin
* @endiliey/responsive-loader -> responsive-loader-modern (my fork, stops webpack from throwing due to a webpack 2 backwards compatibility check that breaks things)
* optimize-css-assets-webpack-plugin -> css-minimizer-webpack-plugin (see note below!)
* react-loadable-ssr-addon -> react-loadable-ssr-addon-webpack-5 (also my fork, stops it from trying to use chunk data that is no longer exposed)

Speed

I have not measured speed impact/changes yet.

[narwold]

We are anxiously awaiting this as we have recently migrated our monorepo to Webpack 5, and our Docusaurus styleguide is the one project that's keeping us from making it a complete migration. Thanks for all the work that's being done on this!

[alexander-akait]

You don't need pnp-webpack-plugin plugin, because webpack has built-in PnP support

[RDIL]

You don't need pnp-webpack-plugin plugin, because webpack has built-in PnP support

Yeah we removed that

[RDIL]

@anshulrgoyal by the way, its 0.5 seconds faster after the upgrade.

I did this benchmark on different, identically powerful machines, with no caches.