Upgrade to Webpack 5

[BSFishy]

Webpack v4 is old and outdated and should be upgraded to Webpack v5. Mend already raised a PR (#545) to do this, however that PR simply upgrades the package number and doesn't actually do any migration work. It's possible that migration isn't extremely necessary, however it would be good to make sure we're not using anything that's deprecated.

This issue will be somewhat a copy of the content on Webpack's migration guide with added context for some steps and with some steps removed that have already been done: https://webpack.js.org/migrate/5/

This migration should take place after #578 is merged.

When performing this migration, please make a draft PR and put each top-level step in a separate commit. This will make it easier to see what's going on while the migration is happening, catch any mistakes during the process, and diagnose issues if they arrise.

Steps:

• Upgrade webpack-cli to ^5.0.1 in package.json and run a yarn install
• Update plugins and loaders to their latest versions
  • Upgrade babel-loader to ^9.1.2
  • Upgrade style-loader to ^3.3.1
  • Upgrade css-loader to ^6.7.3
  • Upgrade postcss-loader to ^7.0.2
  • Upgrade sass-loader to ^13.2.0
  • Upgrade file-loader to ^6.2.0
  • Upgrade url-loader to ^4.1.1
  • Upgrade html-webpack-plugin to ^5.5.0
  • Upgrade circular-dependency-plugin to ^5.2.2
  • Upgrade terser-webpack-plugin to ^5.3.7
  • Upgrade fork-ts-checker-webpack-plugin to ^8.0.0
• Run yarn install then both yarn build and yarn build-docs to make sure there are no build warnings or errors
  • If there are warnings or errors in this step, consult help here
• Change Webpack configuration option optimization.noEmitOnErrors: true to optimization.emitOnErrors: false in src/webpack.config.js
• Set the following Webpack config options in both Webpack configs (src/webpack.config.js and src-docs/webpack.config.js):
  • node.Buffer: false
  • node.process: false
• Run yarn build and yarn build-docs again to see if there are any errors
  • If there are warnings or errors in this step, consult help here
• Remove the Webpack config options from the previous step (node.Buffer and node.process)
• Upgrade webpack to ^5.76.0 and run yarn install
• Clean up configuration
  • Replace node.fs: 'empty' with resolve.fallback.fs: false in src-docs/webpack.config.js
  • Change [hash] to [contenthash] in src-docs/webpack.config.js
  • Follow up: replace url-loader and file-loader with Webpack asset loaders
• Run the following commands again to see if there are any errors
  • yarn build
  • yarn build-docs
  • yarn start
  • yarn test-unit
  • yarn lint
  • If there are warnings or errors in this step, consult help here

If the builds succeeded in the last step, the migration is complete! Mark the PR as ready for review.

[BSFishy]

This issue is currently at a stand-still and I don't have the bandwidth to finish it. The checklist above is up to date on the work that has been done in #587. For anyone who wants to pick this up: currently, the only thing left is fixing an error when running yarn start or yarn build-docs. Webpack can't seem to find a specific file for some reason. I have no clue why but it might have something to do with a Babel transformation or some sort of dead code elimination, or something related. Once that is figured out, this can be merged.

To pick this up, I recommend adding AbhishekReddy1127/oui as a remote, pulling Upgrade-webpack and pushing it to your own fork to maintain Git history. From there, you should be able to create a new PR as you normally would.

[joshuarrrr]

@andreymyssak @SergeyMyssak Any interest in picking this up? I know you have some other issues you're working on, so it's no problem if not.