Update to Webpack 5

[CraigMacomber]

Work Item

Describe the outcome you expect
All usages of webpack 4 are replaced with webpack 5

Approach
Follow https://webpack.js.org/migrate/5/

This guide does not mention updating web-pack-dev server, but its v4 is compatible with webpackv5, so it will be updated first following https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Open questions

There might be some unexpected issues discovered while working on this. The two mentioned below are examples of the kinds of issues that might crop up.

Additional context
#4843 may have to be fixed or worked around as part of this.
#9443 may have to be fixed or worked around as part of this.

Acceptance criteria
All usages of webpack 4 are replaced with webpack 5.
Built works, tests pass. Manual testing of a webpacked example works.

TODO

• Update storybook to use webpack 5 (Accounts for 4 copies of webpack for in client mono-repo)
• Update version of @fluidframework/bundle-size-tools used in build-tools, and remove use of @types/webpack latest webpack has types built in)

[CraigMacomber]

To get fully off webpack4, looks like we will want to do adopt https://www.npmjs.com/package/@storybook/builder-webpack5 . This might not block the main transition though.

Plugins with possible issues:

[email protected] requires a peer of webpack@^4.0.0
[email protected] requires a peer of webpack@^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^4.0.0
[email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^4.5.0
[email protected] requires a peer of typescript@>= 4.3.x
[email protected] requires a peer of webpack@^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^4.0.0
[email protected] requires a peer of webpack@^4.0.0
[email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
[email protected] requires a peer of webpack@^1.9.11

https://www.npmjs.com/package/extract-text-webpack-plugin is deprecated. Migrate to https://www.npmjs.com/package/mini-css-extract-plugin ?

webpack-dev-middleware (5.3.1) appears to have an undeclared dependency on @types/node that is causing trouble since it is not compatible with "@types/[email protected]" which is what it ends up getting. webpack-dev-server claims it works with node>=12.13. https://stackoverflow.com/questions/71500600/some-problem-with-build-my-application-on-angular-13 suggests "@types/node" >=15.12.2 is required.

[tylerbutler]

@CraigMacomber Are you planning to address the use of node libraries and polyfills with this work item? I have been doing some related work to better support Webpack 5 and other modern bundlers (see #9506) so it might intersect with your plans here.

[CraigMacomber]

@tylerbutler I haven't looked into that yet. If it ends up blocking the v5 update I'll sync with you about it. For now I'm just doing the preparer changes of updating webpack-cli and webpack-dev-server, so I won't be getting to that for another PR or 2.

[CraigMacomber]

Looks like duplicate-package-checker-webpack-plugin is not ready for webpack v5, but there is a fork that is: darrenscerri/duplicate-package-checker-webpack-plugin#46

html-webpack-plugin seems to not work if updated to 5.5.0. Might need to be updated at the same time as webpack, or may need tweaks to make new version work.

[CraigMacomber]

The portion of this work I consider worth prioritizing is complete. I have updated the TODO in the issue and will be unassigning myself from this issue.

[zubeirom]

Hi, when can we expect this issue to be solved, we have this issue in CRA and angular => #10383 and it makes it problematic for people to try fluid framework.

[ghost]

This issue has been automatically marked as stale because it has had no activity for 180 days. It will be closed if no further activity occurs within 8 days of this comment. Thank you for your contributions to Fluid Framework!