Upgrade webpack to v5

[daniel-wer]

• Upgraded all webpack related dependencies to the latest version
• Migrated webpack from v4 to v5 as well as all the other breaking changes in the related dependencies
• Webpack no longer polyfills node standard dependencies like process, url or path.
  • Use @airbrake/browser version instead of the deprecated airbrake-js package
  • Use url polyfill for jsonschema
• Removed unused (or no longer needed) webpack-related dependencies
  • git-revision-webpack-plugin, hard-source-webpack-plugin, html-webpack-plugin, style-loader, autodll-webpack-plugin, (file-loader, url-loader)
• Enabled webpack persistent caching (https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md)
  • Automatically registers changes in the module paths, dependencies from package.json, and webpack.config.js
  • Caching between development and production is split and can co-exist
  • The caching seems to be done by timestamp, so a git checkout will invalidate the cache. Although the caching document talks about contenthash comparison as well, which would be beneficial on a CI (https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md#snapshot-types), but I haven't found a way to configure it (https://webpack.js.org/configuration/cache). Maybe they do that automatically?!
  • If we notice that changes that are important for the build are not picked up, the files/directories need to be added to cache.buildDependencies.
• webpack production build time down from ~2m 15s to ~35s through the persistent caching (for a simple change in one file)
  • (down to 1m for a more complex change after a merge with changes in the yarn.lock)
• I tested whether the TerserWebpackPlugin minimize option is still buggy which it doesn't seem to be. However, the production build time would increase ~60% for a marginal size gain of ~5%. I decided that wouldn't be worth it and kept minimize off.
• We should now be able to use es2020 features in our code, for example optional chaining or others

URL of deployed dev instance (used for testing):

• https://updatewebpackv.webknossos.xyz

Steps to test:

• Check out the branch, yarn install and test whether webpack builds successfully on your machine
• General testing on the deployed dev instance
  • Does everything look normal, does the network tab/console show any unexpected errors
  • Open a couple of pages and test general functionality

---

(Please delete unneeded items, merge only when none are left open)

• Updated (unreleased) changelog
• Ready for review

[daniel-wer]

I didn't find a way to specify the mimetype for the webpack asset modules. I found this syntax in some webpack PR but it doesn't work. None of our .woff files seem to be below 10k anyways, though, so maybe we can simply remove this dataUrlCondition and always include them as resources 🤷

[daniel-wer]

@MichaelBuessemeyer Would be great if you could also test this PR, check out the branch on your machine, yarn install and confirm that webpack builds successfully.
@normanrz Not sure how well versed you still are with the webpack config, but feel free to have a look :)

[normanrz]

@normanrz Not sure how well versed you still are with the webpack config, but feel free to have a look :)

I didn't do a full review/test, but looks good to me!

[philippotto]

Glorious! Looks good and works well for me (locally and on dev instance) :) Let's wait for @MichaelBuessemeyer, though, so that he can test on OS X.

[MichaelBuessemeyer]

Let's wait for @MichaelBuessemeyer, though, so that he can test on OS X.

Works perfectly for me under MacOS + Chrome 🎉 .
But I did not check / review the changes.