Attempt #3: upgrade to `Webpack` v5

Created by: valerybugakov

Context

I was looking into DLL Plugin integration into the web app and, because of some Webpack bug, tried out Webpack 5 first. Here we are.

This work is based on existing PRs: https://github.com/sourcegraph/sourcegraph/pull/14597 and https://github.com/sourcegraph/sourcegraph/pull/21061. Thanks, @felixfbecker, and @eseliger for looking into this upgrade. Hopefully, we can nail it this time.

To debug the out-of-memory issue, I've upgraded each package at a time individually per commit. Good news: all checks are green!

Changes

• Webpack and all loaders are upgraded to the latest versions.
• Webpack-dev-server is upgraded to 4.0.0-beta.3
• Web app, browser extension, and Storybook Webpack configs are updated for Webpack 5.
• Filesystem cache is enabled in the development environment in all Webpack configs.
• React-hot-loader is removed in favor of the react-refresh-webpack-plugin.

React Fast Refresh

React hot loader, that we currently use, is deprecated, and it didn't work out of the box with Webpack 5 upgrade. Because hot-reload is essential for the frontend development experience, this PR includes migration to the react-refresh-webpack-plugin. It was impossible to split this work into separate PRs because Webpack 5 and react-refresh-plugin depend on each other's latest versions.

Here's a couple of great resources to read about fast-refresh. Also, the plugin contains an important doc about limitations which we should be aware of to write fast-refreshable React code.

Pinned Webpack 5

A small explainer on why it's needed:

• It's required to have consistent Webpack types. Webpack 5 provides its own typings, but some packages still use @types/webpack, which results in type conflicts.
• Storybook installs Webpack 4 by default as a dependency which results in multiple warnings during the development process. At the same time, Webpack 4 is not used at all because preview and manager builders are using v5 now.

We're not pinning a specific version of the Webpack, so it should be ok till the issues above are solved by maintainers. Leave a comment if you have a better solution in mind.

Stats

Approximate timings based on local testing of the hot start commands — development mode + cache is already in place.

Workspace	Start Before	Start After
Web app	30s	6.5s
Browser extension	26s	3s
Storybook	30s	7.5s or 3.5s with DLL Plugin

Web app production bundle:

Before	After

Known issues

1. Hot-reload doesn't work—instead, webpack-dev-server fallbacks to live-reload. — migration to react-refresh-webpack-plugin solved this issue.