Update JS dependencies and webpack (#14118)

* Update JS dependencies

- Update all JS dependencies
- Adapt webpack config for version 5
- Update to Less 4.0, adapting usage of removed mixin syntax
- Enable new ESLint rules and fix discovered issues

* update license-webpack-plugin to fix missing licenses

* update license-webpack-plugin once more to get webpack into the license output

* switch to license-checker-webpack-plugin again for performance

* update deps again

Co-authored-by: Lauris BH <lauris@nix.lv>

webpack.config.js

@@ -2,14 +2,13 @@ const fastGlob = require('fast-glob');
 const wrapAnsi = require('wrap-ansi');
 const AddAssetPlugin = require('add-asset-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
+const LicenseCheckerWebpackPlugin = require('license-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const {statSync} = require('fs');
 const {resolve, parse} = require('path');
-const {LicenseWebpackPlugin} = require('license-webpack-plugin');
 const {SourceMapDevToolPlugin} = require('webpack');
 
 const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
@@ -30,8 +29,8 @@ const filterCssImport = (url, ...args) => {
     if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false;
   }
 
-  if (cssFile.includes('font-awesome')) {
-    if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false;
+  if (cssFile.includes('font-awesome') && /(eot|ttf|otf|woff|svg)$/.test(importedFile)) {
+    return false;
   }
 
   return true;
@@ -71,13 +70,15 @@ module.exports = {
       // we have to put it in / instead of /js/
       return chunk.name === 'serviceworker' ? '[name].js' : 'js/[name].js';
     },
-    chunkFilename: 'js/[name].js',
+    chunkFilename: ({chunk}) => {
+      const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
+      return language ? `js/monaco-language-${language.toLowerCase()}.js` : `js/[name].js`;
+    },
   },
   optimization: {
     minimize: isProduction,
     minimizer: [
       new TerserPlugin({
-        sourceMap: true,
         extractComments: false,
         terserOptions: {
           output: {
@@ -103,6 +104,8 @@ module.exports = {
       chunks: 'async',
       name: (_, chunks) => chunks.map((item) => item.name).join('-'),
     },
+    moduleIds: 'named',
+    chunkIds: 'named',
   },
   module: {
     rules: [
@@ -240,11 +243,6 @@ module.exports = {
   },
   plugins: [
     new VueLoaderPlugin(),
-    // avoid generating useless js output files for css--only chunks
-    new FixStyleOnlyEntriesPlugin({
-      extensions: ['less', 'scss', 'css'],
-      silent: true,
-    }),
     new MiniCssExtractPlugin({
       filename: 'css/[name].css',
       chunkFilename: 'css/[name].css',
@@ -259,29 +257,18 @@ module.exports = {
     new MonacoWebpackPlugin({
       filename: 'js/monaco-[name].worker.js',
     }),
-    isProduction ? new LicenseWebpackPlugin({
+    isProduction ? new LicenseCheckerWebpackPlugin({
       outputFilename: 'js/licenses.txt',
-      perChunkOutput: false,
-      addBanner: false,
-      skipChildCompilers: true,
-      modulesDirectories: [
-        resolve(__dirname, 'node_modules'),
-      ],
-      additionalModules: [
-        '@primer/octicons',
-      ].map((name) => ({name, directory: resolve(__dirname, `node_modules/${name}`)})),
-      renderLicenses: (modules) => {
+      outputWriter: ({dependencies}) => {
         const line = '-'.repeat(80);
-        return modules.map((module) => {
-          const {name, version} = module.packageJson;
-          const {licenseId, licenseText} = module;
+        return dependencies.map((module) => {
+          const {name, version, licenseName, licenseText} = module;
           const body = wrapAnsi(licenseText || '', 80);
-          return `${line}\n${name}@${version} - ${licenseId}\n${line}\n${body}`;
+          return `${line}\n${name}@${version} - ${licenseName}\n${line}\n${body}`;
         }).join('\n');
       },
-      stats: {
-        warnings: false,
-        errors: true,
+      override: {
+        'jquery.are-you-sure@*': {licenseName: 'MIT'},
       },
     }) : new AddAssetPlugin('js/licenses.txt', `Licenses are disabled during development`),
   ],
@@ -302,11 +289,26 @@ module.exports = {
     ],
   },
   stats: {
+    assetsSort: 'name',
+    assetsSpace: Infinity,
+    cached: false,
+    cachedModules: false,
     children: false,
+    chunkModules: false,
+    chunkOrigins: false,
+    chunksSort: 'name',
+    colors: true,
+    entrypoints: false,
     excludeAssets: [
-      // exclude monaco's language chunks in stats output for brevity
-      // https://github.com/microsoft/monaco-editor-webpack-plugin/issues/113
-      /^js\/[0-9]+\.js$/,
-    ],
+      /^js\/monaco-language-.+\.js$/,
+      !isProduction && /^js\/licenses.txt$/,
+    ].filter((item) => !!item),
+    groupAssetsByChunk: false,
+    groupAssetsByEmitStatus: false,
+    groupAssetsByInfo: false,
+    groupModulesByAttributes: false,
+    modules: false,
+    reasons: false,
+    runtimeModules: false,
   },
 };