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, — migration to react-refresh-webpack-plugin solved this issue.webpack-dev-server fallbacks to live-reload.