refactor: updated devDependencies regarding webpack / to webpack version 5 & some cleanup

[mfranzke]

Updated webpack to version 5, and all it's related dependencies

As I'm not that kind of a webpack user, I would probably link some of the necessary code changes to some older commits with which the code was introduced.

Summary of changes:

Simply updated

• clean-css-loader
  • major release update relates to dropping webpack@1 support
• html-webpack-plugin
• node-sass-selector-importer (got removed by refactor: replace node-sass by sass #1373)
• style-loader
  • major release is related to "minimum supported Node.js version is 12.13.0" and "minimum supported webpack version is 5.0.0"
• svg-sprite-loader
• svg-transform-loader
• svgo-loader
  • Switched to SVGO 3, see its breaking changes: https://github.com/svg/svgo/releases/tag/v3.0.0
    • Node.js 14+ is required for version
    • stable package is replaced with native stable sort (required node 12+)
  • Removed support of Webpack 4
• ts-loader
  • major release update relates to "minimum webpack version: 5" and "minimum node version: 12"
• no-emit-webpack-plugin (this got removed by fix(initialize): removing no-emit-webpack-plugin dependency #1348 #1349)
• babel-loader
  • major update is related to Requiring babel ^7.12.0 and Node.js >= 14.15.0
• css-loader
  • major release update relates to "minimum required Node.js version is 10.13.0", "minimum required webpack version is 4.27.0" and "minimum supported Node.js version is 12.13.0", "minimum supported webpack version is 5"
• autoprefixer
• webpackbar
• webpack-hot-middleware
  • mainly about webpack 5 support
• sass-loader
  • BREAKING CHANGES, not relevant for us (we're updating webpack anyhow with this ticket and are on node version 14.21):
    • minimum supported webpack version is 5
    • minimum supported Node.js version is 14.15.0

Updated and migrated some code

• webpack: https://webpack.js.org/migrate/5/#upgrade-webpack-to-5
  • ValidationError: Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'sourceMap'.
  • optimization.splitChunks.cacheGroups.vendors → optimization.splitChunks.cacheGroups.defaultVendors (https://webpack.js.org/migrate/5/#clean-up-configuration)
  • When using a custom configuration, drop name: false and replace name: string | function with idHint: string | function (https://webpack.js.org/migrate/5/#clean-up-configuration)
  • out of the following two changes, that lead to conflicting configurations after migration, I've decided to use the latter – both have been introduced with commit 70fe9b6#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319R212, but don't seem to work in parallel anymore:
    • optimization.namedChunks: true → optimization.chunkIds: 'named' (https://webpack.js.org/migrate/5/#update-outdated-options)
    • optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' } (https://webpack.js.org/migrate/5/#update-outdated-options)
• clean-webpack-plugin:
  • Additional Upgrade Information - Please read before submitting new issues johnagan/clean-webpack-plugin#106
    • "paths: Use cleanOnceBeforeBuildPatterns and/or cleanAfterEveryBuildPatterns."
    • "allowExternal: Renamed to dangerouslyAllowCleanPatternsOutsideProject. You most likely do not need this option with version v2 because it checks against process.cwd() rather than plugin option root."
  • besides that no relevant breaking changes ("Dropped support for NodeJS 8" and "Dropped support for webpack 3")
• webpack-merge
  • latest release related to webpack 5 compatibility
• mini-css-extract-plugin
  • the major release update is mainly about "minimum supported Node.js version is 12.13.0" and "minimum supported webpack version is 5.0.0"
• webpack-cli:
  • the display parameter seems to have been replaced by stats
  • besides that it's mainly about webpack 5 support being dropped
• copy-webpack-plugin:
  • the flatten option has been differently defined now (https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md#700-2020-12-10 and https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md#800-2021-03-04)
  • besides that nothing relevant for us:
    • minimum supported Node.js version is 12.13.0
    • minimum supported Node.js version is 12.20.0
    • minimum supported Node.js version is 14.15.0
• webpack-dev-middleware:
  • "the logger, logLevel and logTime options were removed without replacement." source: https://github.com/webpack/webpack-dev-middleware/releases?after=v4.0.0-rc.1
  • besides that it's mainly about supported Node.js and webpack version updates (minimum supported Node.js version is 12.13.0 (build: drop node v10 webpack/webpack-dev-middleware#928) (4cffeff) and minimum supported webpack version is 5.0.0, minimum supported Nodejs version is 14.15.0)
• postcss-loader:
  • "postcss was moved to peerDependencies, you need to install postcss"
  • "PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option, please look at docs"
  • minimum supported Node.js version is 12.13.0
  • minimum supported Node.js version is 14.15.0
• html-loader
  • main breaking change: "the interpolate option was removed, please consider migration on the preprocessor"; this has been handled by 35e13c6
  • furthermore all of the other used options have been (re)moved in the meantime
  • and we need to ensure that the generated assets (like e.g. <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />) aren't being followed by Webpack, as they are partly being generated on the fly or copied to their place in the structure, by the newly supported webpack comment.
  • preventAttributesEscaping option got introduced with 318801a, but there's no documentation out of that version that could get reproduced anymore, so it needed to get removed; the current comment within the webpack config mentions a correctly working srcdoc-attribute that got introduced by Refactor Iframe Routing Logic + Add Psuedo-404 Support #1131 but that still works correctly.
• mini-css-extract-plugin: Removed allChunks option that has been added with 318801a#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319R154 but is now marked as not being a parameter (any more)

Removed

• hard-source-webpack-plugin-patch: Webpack 5 supportes module caching out of the box, compare to e.g. Error when using with webpack 5 mzgoddard/hard-source-webpack-plugin#514 (comment) – and we don't need to configure anything for this:

Cache the generated webpack modules and chunks to improve build speed. cache is set to type: 'memory' in development mode and disabled in production mode. cache: true is an alias to cache: { type: 'memory' }. To disable caching pass false
source: https://webpack.js.org/configuration/cache/#cache

• critical & critical-css-webpack-plugin: this seems to have been removed (intentionally?) by 2cb663d#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319L365 (these have been removed with refactor: removed unused dependencies #1319 even already)

#updatingdependenciesbitbybitbybitbybitbybitbybitbybitbybit

[JosefBredereck]

What is the current status of this PR? Do we want to proceed with it?

[mfranzke]

What is the current status of this PR? Do we want to proceed with it?

I'm sadly not focussing on one activity at the time and jumping from topic to topic – I would say that this is 95% done, but haven't had the chance to finalize it. Looks promising at least.

[mfranzke]

@JosefBredereck I've finally checked this and it looks good to me for approval and merge.