Merge #1867

1867: feat: update webpack to v5 r=herschel666 a=herschel666

# Stats of packages/spec/integration/react

<table>
  <tr>
    <th>webpack v4</th>
    <th>webpack v5</th>
  </tr>
  <tr>
    <th colspan="2">Build artifacts</th>
  </tr>
  <tr>
    <td>
<ul>
<li>server.js (3.85 MB)</li>
<li>fixture-react-0-84e0870c4c53.js (1.76 MB)</li>
<li>fixture-react-1-1aa9acadc44c.js (4.88 kB)</li>
<li>fixture-react-2-b6061799b9cf.js (1.2 kB)</li>
<li>fixture-react-3-417ead29afb3.js (1.39 kB)</li>
<li>fixture-react-31cd1819b262.js (158 kB)</li>
<li>img-7507deb7dbbf6284.png (235 B)</li>
</ul>
    </td>
    <td>
<ul>
<li>server.js (3.76 MB)</li>
<li>fixture-react-8da4f12103b1.js (1.71 MB)</li>
<li>fixture-react-9069381437d1.js (150 kB)</li>
<li>fixture-react-3-8981672b56c9.js (3.79 kB)</li>
<li>fixture-react-4-bd71fc8886d1.js (968 B)</li>
<li>fixture-react-2-588fcf498ae0.js (919 B)</li>
<li>img-7507deb7dbbf6284.png (235 B)</li>
</ul>
    </td>
   </tr>
  <tr>
    <th colspan="2">Build durations*</th>
  </tr>
  <tr>
    <td>
<b>SMP  ⏱ General output time took 6.66 secs</b><br>
LoggerPlugin took 0.015 secs<br>
ModuleConcatenationPlugin took 0.011 secs<br>
StatsWritePlugin took 0.01 secs<br>
NamedModulesPlugin took 0.004 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.47 secs<br>
packages/webpack/lib/utils/loader.js took 0.099 secs
    </td>
    <td>
<b>SMP  ⏱ General output time took 6.97 secs</b><br>
LoggerPlugin took 0.004 secs<br>
NamedModuleIdsPlugin took 0.001 secs<br>
DefinePlugin took 0.001 secs<br>
StatsWritePlugin took 0 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.74 secs<br>
packages/webpack/lib/utils/loader.js took 0.102 secs
    </td>
  <tr>
  <tr>
    <td>
<b>SMP  ⏱ General output time took 6.5 secs</b><br>
StatsWritePlugin took 0.01 secs<br>
ModuleConcatenationPlugin took 0.01 secs<br>
LoggerPlugin took 0.005 secs<br>
NamedModulesPlugin took 0.001 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.36 secs<br>
packages/webpack/lib/utils/loader.js took 0.095 secs
    </td>
    <td>
<b>SMP  ⏱ General output time took 6.63 secs</b><br>
LoggerPlugin took 0.003 secs<br>
StatsWritePlugin took 0.001 secs<br>
NamedModuleIdsPlugin took 0.001 secs<br>
DefinePlugin took 0 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.42 secs<br>
packages/webpack/lib/utils/loader.js took 0.096 secs
    </td>
  <tr>
  <tr>
    <td>
<b>SMP  ⏱ General output time took 6.52 secs</b><br>
ModuleConcatenationPlugin took 0.011 secs<br>
StatsWritePlugin took 0.009 secs<br>
NamedModulesPlugin took 0.005 secs<br>
LoggerPlugin took 0.005 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.33 secs<br>
packages/webpack/lib/utils/loader.js took 0.098 secs
    </td>
    <td>
<b>SMP  ⏱ General output time took 6.46 secs</b><br>
LoggerPlugin took 0.004 secs<br>
StatsWritePlugin took 0.001 secs<br>
NamedModuleIdsPlugin took 0.001 secs<br>
DefinePlugin took 0 secs<br>
EnvironmentPlugin took 0 secs<br><br>
babel-loader took 5.22 secs<br>
packages/webpack/lib/utils/loader.js took 0.092 secs
    </td>
  <tr>
</table>

*: `packages/spec/integration/react/node_modules/.cache` got removed before each build

<details>
<summary>Bors merge bot cheat sheet</summary>

We are using [bors-ng](https://github.com/bors-ng/bors-ng) to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of `bors delegate+` or `bors delegate=[list]`).

| Syntax | Description |
| --- | --- |
| bors merge | Run the test suite and push to master if it passes. Short for "reviewed: looks good." |
| bors merge- | Cancel an r+, r=, merge, or merge= |
| bors try | Run the test suite without pushing to master. |
| bors try- | Cancel a try |
| bors delegate+ | Allow the pull request author to merge their changes. |
| bors delegate=[list] | Allow the listed users to r+ this pull request's changes. |
| bors retry | Run the previous command a second time. |

This is a short collection of opinionated commands. For a full list of the commands read the [bors reference](https://bors.tech/documentation/).

</details>


Co-authored-by: Emanuel Kluge <[email protected]>

packages/postcss/mixin.core.js

@@ -2,7 +2,7 @@ const postcssImportPlugin = require('postcss-import');
 const postcssPresetEnv = require('postcss-preset-env');
 const postcssNormalizeCharset = require('postcss-normalize-charset');
 const ExtractCSSPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+const CSSMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { Mixin } = require('hops-mixin');
 const { join, trimSlashes } = require('pathifist');
 
@@ -110,19 +110,19 @@ class PostCSSMixin extends Mixin {
       new ExtractCSSPlugin({
         filename: getAssetPath(
           this.config.assetPath,
-          '[name]-[contenthash:12].css'
+          '[name]-[chunkhash:12].css'
         ),
         chunkFilename: getAssetPath(
           this.config.assetPath,
-          '[name]-[contenthash:12].css'
+          '[name]-[chunkhash:12].css'
         ),
         ignoreOrder: true,
       })
     );
 
     webpackConfig.optimization.minimizer.push(
-      new OptimizeCSSPlugin({
-        cssProcessorOptions: {
+      new CSSMinimizerPlugin({
+        minimizerOptions: {
           reduceIdents: { disable: true },
           zindex: { disable: true },
           mergeIdents: { disable: true },

packages/postcss/package.json

@@ -22,17 +22,17 @@
   },
   "dependencies": {
     "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^3.0.1",
     "hops-mixin": "15.0.0-nightly.2",
-    "mini-css-extract-plugin": "^1.0.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "pathifist": "^1.0.0",
     "postcss": "^8.2.1",
     "postcss-import": "^14.0.0",
-    "postcss-loader": "^4.1.0",
+    "postcss-loader": "^6.1.0",
     "postcss-normalize-charset": "^4.0.1",
     "postcss-preset-env": "^6.7.0",
     "style-loader": "^2.0.0",
-    "webpack": "^4.43.0"
+    "webpack": "5.24.4"
   },
   "homepage": "https://github.com/xing/hops/tree/master/packages/postcss#readme"
 }

packages/pwa/lib/service-worker-plugin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+const { Compilation, EntryPlugin } = require('webpack');
 const { ConcatSource, RawSource } = require('webpack-sources');
 
 const PLUGIN_NAME = 'hops-service-worker-plugin';
@@ -22,7 +22,7 @@ module.exports = class ServiceWorkerPlugin {
     function onMake(compilation, callback) {
       compilation
         .createChildCompiler(PLUGIN_NAME, { filename: publicWorkerFilename }, [
-          new SingleEntryPlugin(
+          new EntryPlugin(
             compiler.context,
             require.resolve('./worker-shim'),
             'worker'
@@ -31,12 +31,12 @@ module.exports = class ServiceWorkerPlugin {
         .runAsChild(callback);
     }
 
-    function onEmit(compilation, callback) {
-      compilation.assets[publicWorkerFilename] = new ConcatSource(
+    function onEmit(assets, callback) {
+      assets[publicWorkerFilename] = new ConcatSource(
         new RawSource(
           'HOPS_ASSETS = ' +
             JSON.stringify(
-              Object.keys(compilation.assets).filter(function (item) {
+              Object.keys(assets).filter(function (item) {
                 return (
                   !item.match(
                     /hot-update\.js(:?on)?|\.webmanifest|\.map|assets\.json$/
@@ -46,12 +46,21 @@ module.exports = class ServiceWorkerPlugin {
             ) +
             ';'
         ),
-        compilation.assets[publicWorkerFilename]
+        assets[publicWorkerFilename]
       );
       callback();
     }
 
-    compiler.hooks.make.tapAsync(PLUGIN_NAME, onMake);
-    compiler.hooks.emit.tapAsync(PLUGIN_NAME, onEmit);
+    compiler.hooks.make.tapAsync(PLUGIN_NAME, (compilation, callback) => {
+      onMake(compilation, callback);
+
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED,
+        },
+        onEmit
+      );
+    });
   }
 };

packages/pwa/mixin.core.js

@@ -7,15 +7,44 @@ const ServiceWorkerPlugin = require('./lib/service-worker-plugin');
 const getAssetPath = (...args) => trimSlashes(join(...args));
 
 class PWAMixin extends Mixin {
-  configureBuild(webpackConfig, { allLoaderConfigs }, target) {
+  configureBuild(
+    webpackConfig,
+    { fileLoaderConfig, urlLoaderConfig, allLoaderConfigs },
+    target
+  ) {
+    const filename = getAssetPath(
+      this.config.assetPath,
+      '[name]-[hash:16].[ext]'
+    );
+    const emitFile = target === 'build' || target === 'develop';
+    const loaderIndex = urlLoaderConfig.oneOf.findIndex(
+      ({ resourceQuery: r }) =>
+        r instanceof RegExp && 'noinline'.match(r) !== null
+    );
+
+    // Rolling back to file-loader here, because the app-manifest-loader
+    // isn't able to deal with Asset Modules, yet.
+    delete fileLoaderConfig.type;
+    delete fileLoaderConfig.generator;
+    fileLoaderConfig.loader = require.resolve('file-loader');
+    fileLoaderConfig.options = {
+      name: filename,
+      esModule: false,
+      emitFile,
+    };
+    urlLoaderConfig.oneOf[loaderIndex] = {
+      resourceQuery: /noinline/,
+      ...fileLoaderConfig,
+    };
+
     const webmanifestLoader = {
       test: /(\.webmanifest|browserconfig\.xml)$/,
       use: [
         {
           loader: require.resolve('file-loader'),
           options: {
-            name: getAssetPath(this.config.assetPath, '[name]-[hash:16].[ext]'),
-            emitFile: target === 'build' || target === 'develop',
+            name: filename,
+            emitFile,
           },
         },
         {

packages/pwa/package.json

@@ -31,8 +31,8 @@
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "pathifist": "^1.0.0",
-    "webpack": "^4.43.0",
-    "webpack-sources": "^2.0.0"
+    "webpack": "5.24.4",
+    "webpack-sources": "^2.3.0"
   },
   "homepage": "https://github.com/xing/hops/tree/master/packages/pwa#readme"
 }

packages/typescript/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "hops-mixin": "15.0.0-nightly.2",
-    "ts-loader": "^8.0.0"
+    "ts-loader": "^9.2.2"
   },
   "peerDependencies": {
     "typescript": "^3.7.0 || ^4.0.0"

packages/webpack/lib/configs/build.js

@@ -1,15 +1,10 @@
 const { dirname, relative } = require('path');
-const {
-  EnvironmentPlugin,
-  HashedModuleIdsPlugin,
-  NamedModulesPlugin,
-  optimize,
-} = require('webpack');
+const { EnvironmentPlugin, DefinePlugin, ids } = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const { join, trimSlashes } = require('pathifist');
 const getModules = require('../utils/modules');
 
-const { ModuleConcatenationPlugin } = optimize;
+const { HashedModuleIdsPlugin, NamedModuleIdsPlugin } = ids;
 
 module.exports = function getConfig(config, name) {
   const getAssetPath = (...arg) => trimSlashes(join(config.assetPath, ...arg));
@@ -45,10 +40,9 @@ module.exports = function getConfig(config, name) {
 
   const fileLoaderConfig = {
     exclude: [/\.(?:m?js|html|json)$/],
-    loader: require.resolve('file-loader'),
-    options: {
-      name: getAssetPath('[name]-[hash:16].[ext]'),
-      esModule: false,
+    type: 'asset/resource',
+    generator: {
+      filename: getAssetPath('[name]-[contenthash:16][ext]'),
     },
   };
 
@@ -60,11 +54,14 @@ module.exports = function getConfig(config, name) {
         ...fileLoaderConfig,
       },
       {
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: getAssetPath('[name]-[hash:16].[ext]'),
-          esModule: false,
+        type: 'asset',
+        generator: {
+          filename: getAssetPath('[name]-[contenthash:16][ext]'),
+        },
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
         },
       },
     ],
@@ -81,6 +78,7 @@ module.exports = function getConfig(config, name) {
       allLoaderConfigs,
     },
     name,
+    target: ['web', 'es2020'],
     mode: isProduction ? 'production' : 'development',
     bail: isProduction,
     context: config.rootDir,
@@ -94,6 +92,10 @@ module.exports = function getConfig(config, name) {
       devtoolModuleFilenameTemplate: (info) =>
         relative(config.rootDir, info.absoluteResourcePath),
     },
+    // fixme
+    cache: {
+      type: 'memory',
+    },
     resolve: {
       modules: getModules(config.rootDir),
       alias: {
@@ -123,7 +125,6 @@ module.exports = function getConfig(config, name) {
     optimization: {
       splitChunks: {
         chunks: 'all',
-        name: false,
       },
       minimizer: [
         new TerserPlugin({
@@ -133,10 +134,15 @@ module.exports = function getConfig(config, name) {
           },
         }),
       ],
+      chunkIds: 'natural',
+      usedExports: true,
+      concatenateModules: true,
     },
     plugins: [
-      new (isProduction ? HashedModuleIdsPlugin : NamedModulesPlugin)(),
-      new ModuleConcatenationPlugin(),
+      new (isProduction ? HashedModuleIdsPlugin : NamedModuleIdsPlugin)(),
+      // Needed for bootstrap/lib/utils#environmentalize, which falls
+      // back to `process.env` if there's no global variable `_env`
+      new DefinePlugin({ 'process.env': JSON.stringify({}) }),
       new EnvironmentPlugin({ NODE_ENV: 'development' }),
     ],
     performance: {

packages/webpack/lib/configs/develop.js

@@ -2,7 +2,7 @@ const { dirname, relative } = require('path');
 const {
   EnvironmentPlugin,
   HotModuleReplacementPlugin,
-  NamedModulesPlugin,
+  DefinePlugin,
 } = require('webpack');
 const { join, trimSlashes } = require('pathifist');
 const getModules = require('../utils/modules');
@@ -40,10 +40,9 @@ module.exports = function getConfig(config, name) {
 
   const fileLoaderConfig = {
     exclude: [/\.(?:m?js|html|json)$/],
-    loader: require.resolve('file-loader'),
-    options: {
-      name: getAssetPath('[name]-[hash:16].[ext]'),
-      esModule: false,
+    type: 'asset/resource',
+    generator: {
+      filename: getAssetPath('[name]-[contenthash:16][ext]'),
     },
   };
 
@@ -55,11 +54,14 @@ module.exports = function getConfig(config, name) {
         ...fileLoaderConfig,
       },
       {
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: getAssetPath('[name]-[hash:16].[ext]'),
-          esModule: false,
+        type: 'asset',
+        generator: {
+          filename: getAssetPath('[name]-[contenthash:16][ext]'),
+        },
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
         },
       },
     ],
@@ -76,18 +78,23 @@ module.exports = function getConfig(config, name) {
       allLoaderConfigs,
     },
     name,
+    target: ['web', 'es2020'],
     mode: 'development',
     context: config.rootDir,
     entry: require.resolve('../shims/develop'),
     output: {
       path: config.buildDir,
       publicPath: '/',
       pathinfo: true,
-      filename: getAssetPath(`${config.name}.js`),
+      filename: getAssetPath(`${config.name}-[id].js`),
       chunkFilename: getAssetPath(`${config.name}-[id].js`),
       devtoolModuleFilenameTemplate: (info) =>
         relative(config.rootDir, info.absoluteResourcePath),
     },
+    // fixme
+    cache: {
+      type: 'memory',
+    },
     resolve: {
       modules: getModules(config.rootDir),
       alias: {
@@ -115,10 +122,14 @@ module.exports = function getConfig(config, name) {
     },
     externals: [],
     optimization: {
-      splitChunks: { chunks: 'all', name: false },
+      splitChunks: { chunks: 'all' },
+      moduleIds: 'named',
+      chunkIds: 'natural',
     },
     plugins: [
-      new NamedModulesPlugin(),
+      // Needed for bootstrap/lib/utils#environmentalize, which falls
+      // back to `process.env` if there's no global variable `_env`
+      new DefinePlugin({ 'process.env': JSON.stringify({}) }),
       new HotModuleReplacementPlugin(),
       new EnvironmentPlugin({ NODE_ENV: 'development' }),
     ],
@@ -128,9 +139,11 @@ module.exports = function getConfig(config, name) {
       maxAssetSize: 52428800,
     },
     infrastructureLogging: {
-      level: 'none',
+      // TODO: check in integration tests, that no stdout
+      // containing "<e> [webpack-dev-middleware]" is present
+      level: 'error',
     },
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
     watchOptions: { aggregateTimeout: 300, ignored: /node_modules/ },
   };
 };