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:

css-loader@1.0.1 requires a peer of webpack@^4.0.0
extract-text-webpack-plugin@4.0.0-beta.0 requires a peer of webpack@^3.0.0 || ^4.0.0
file-loader@3.0.1 requires a peer of webpack@^4.0.0
istanbul-instrumenter-loader@3.0.1 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
less-loader@4.1.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
monaco-editor-webpack-plugin@1.7.0 requires a peer of webpack@^4.5.0
react-docgen-typescript@2.2.2 requires a peer of typescript@>= 4.3.x
sass-loader@7.3.1 requires a peer of webpack@^3.0.0 || ^4.0.0
html-webpack-plugin@3.2.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
terser-webpack-plugin@1.4.5 requires a peer of webpack@^4.0.0
url-loader@2.3.0 requires a peer of webpack@^4.0.0
webpack-filter-warnings-plugin@1.2.1 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0
webpack-karma-die-hard@1.0.4 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/node@14.18.0" 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: https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin/pull/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 => https://github.com/microsoft/FluidFramework/issues/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!