Upgrade to Webpack 5

[chadlwilson]

Similar to gocd/gocd#10852

Summary

Currently we are using Webpack 4. Many plugins/loaders etc have changed and are no longer getting patched/updated, so we probably need to migrate to Webpack 5.

Keeping track of work/research here, for want of a better place.

Things to do

General research

• https://webpack.js.org/migrate/5/
• Research whether the below loaders/plugin combinations are still the best/recommended approaches here

Plugins/Loaders

• Consider switching file-loader to https://webpack.js.org/guides/asset-modules/
• replace/remove script-ext-html-webpack-plugin
  • Maybe to html-bundler-webpack-plugin, and remove html-webpack/mini-css-extract

Current version already supports webpack 5 / can be deferred

• Upgrade css-loader from 5.x to 6.x
  • https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#600-2021-07-14
  • Unclear if 5.x works on webpack 5? (probably)
• Upgrade sass-loader from 10.x to 13.x
  • https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#1100-2021-02-05
• Upgrade html-webpack-plugin from 4.x to 5.x
  • https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md#500-2021-02-03
• Upgrade mini-css-extract-plugin from 1.x to 2.x
  • https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md#200-2021-06-30

[sambitD007]

@chadlwilson script-ext-html-webpack-plugin is also deprecated with plugin no longer being maintained.
https://github.com/numical/script-ext-html-webpack-plugin

I am getting

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: webpack@5.91.0
npm error node_modules/webpack
npm error   dev webpack@"^5.91.0" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from html-webpack-plugin@4.5.2
npm error   node_modules/html-webpack-plugin
npm error     dev html-webpack-plugin@"^4.5.2" from the root project
npm error     peer html-webpack-plugin@"^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
npm error     node_modules/script-ext-html-webpack-plugin
npm error       dev script-ext-html-webpack-plugin@"^2.1.5" from the root project

[chadlwilson]

@sambitD007 yes, that also needs replacing/removing.

Can I ask what you are trying to achieve?

[sambitD007]

I am trying out the above task of migrating the code to webpack 5.

[chadlwilson]

Ahh okay - cool. Yeah, I imagine it's not easy.