feat(core): upgrade to webpack-dev-server@4

[AviVahl]

Motivation

• current webpack-dev-server@3 has deps with known security issues.
• v4 has been released as stable
• use react-dev-utils@next for temporary Webpack 5 support (instead of our copied files)
• Server /static folder with the official static option instead of an express middleware
• Cleanup old/unused configs

Used: https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

• yarn start works with a good DX, hot reload and show new error overlay
• CI pass tests

[AviVahl]

TBH, I'm not sure whether the tests cover the start flow or hot reloading. Given a custom client/overlay is used, further validation of this feels needed.

The logging options were removed from DevServer itself, as it now uses webpack's logging mechanism.
It might be needed to adjust the used webpack config logging options to replicate the existing behavior.

[netlify]

✔️ [V2]

🔨 Explore the source changes: 356daa3

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/617ac69b8f96040008d7e268

😎 Browse the preview: https://deploy-preview-5420--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	66
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5420--docusaurus-2.netlify.app/

[slorber]

Thanks!

I am able to start the dev server successfully (yarn install && yarn start:website)

However there are a few issues:

• Logging is much more verbose than before, how can we revert this?
• Hot reload does not actually work (both for React and md files). I see Webpack recompiling but no browser hot reload, and a refresh is required to see the changes)

Can you add back the useless ...{} spread? We'll remove this once we get it working. In the meantime it helps to review this PR otherwise I see a larger diff than there are actual changes.

[slorber]

Some useful CRA PR to get some inspiration:

• https://github.com/facebook/create-react-app/pull/11201/files
• https://github.com/facebook/create-react-app/pull/11318/files

[slorber]

Some random notes:

• I'm not sure CRA still use the custom hot dev client that we initially copied to Docusaurus. Doc says it's an alternate dev client and only works for v3. The PR above seems to not use it, and does not use client: false like us. (https://github.com/facebook/create-react-app/tree/main/packages/react-dev-utils#webpackhotdevclient)

• Not using client: false leads to hot reload working. I'd say we should just move on and let Webpack do its job without re-inventing the wheel. It's not clear to me why we use a custom hot dev client in the first place 😅 will try to find a reason

• Using infrastructureLogging: {level: 'error'} (parent config, not dev serverà) can silence some logs:

However, I'm not able to get rid of the following logs that we didn't have before:

As not all Docusaurus users are skilled frontend devs, I'd prefer not to show anything too complicated in the console ;)

@alexander-akait any idea?

[AviVahl]

Thanks for looking into this! :)

The ..{ causes excess configuration fields to not error. Since the types are much more accurate, I suggest removing it.

If you add stats: 'errors-warnings' to the webpack config, it may behave closer to what you expect I think...

[alexander-akait]

@slorber for reduce stats output you can use devServer.devMiddleware.stats, anyway what do you think extra here? We can reduce output

[slorber]

Thanks

To sum-up:

• Docusaurus initially tried to copy CRA and add webpackHotDevClient + react-error-overlay
• webpackHotDevClient is meant to be used with Webpack 3.X according to CRA doc 🤪
• CRA and Webpack's error overlay are merging (comment https://github.com/facebook/create-react-app/pull/11201/files#r696840791)
• Webpack's error overlay will be improved in improve our overlay webpack/webpack-dev-server#3689 (in particular supporting display of runtime errors)
• CRA supports Webpack 5 and we should clean up some temporarily copied code here: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus/src/webpack/react-dev-utils-webpack5

I think we'll follow what CRA do and use the new Webpack overlay features

I'm on holiday in 2 days so will wait for my return to merge/release this.

[alexander-akait]

Also will be great any feedback/help with out current overlay, improving is not hard, just need some help here

[AviVahl]

I've merged main and bumped webpack-dev-server to v4.3.0. All tests pass locally.

[slorber]

I'll make sure this PR is merged asap, just want to do a last stable release before merging it so that we have time to see dev issues by using it ourselves

[alexander-akait]

In near future I will implement eTag and Modified-Since headers for caching, so browser will be faster with getting output, especial in incremental build with caches

[slorber]

In near future I will implement eTag and Modified-Since headers for caching, so browser will be faster with getting output, especial in incremental build with caches

Great, never thought about this in dev but it makes sense 👍 Let me know when we should upgrade and test this.

---

@AviVahl we just released beta.7.

If there's no major bug reported in the upcoming day I'll complete and merge this PR next week.

[slorber]

beta.8 bugfix released, hope to merge this PR next week then 😅

[slorber]

temporary pinning this dep, react-dev-utils package seems stable enough for usage in Docusaurus