Update to webpack v5 (#1848)

Update webpack in the following components to version 5:

ui-styles (StyleGuide)
ui-components (Storybook)
ui-scripts (gradle run/build)
This change will also fix a circular dependency between ui-api and ui-components.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-scripts/src/commands/serve.js

@@ -29,9 +29,9 @@ const webpackConfig = require("../webpack.config");
 module.exports = () => {
   const compiler = Webpack(webpackConfig);
   const devServerConfig = webpackConfig[0].devServer;
-  const server = new WebpackDevServer(compiler, devServerConfig);
+  const server = new WebpackDevServer(devServerConfig, compiler);
 
-  server.listen(devServerConfig.port, "127.0.0.1", () => {
+  server.startCallback(() => {
     console.log(`Starting server on http://localhost:${devServerConfig.port}`);
   });
 

scm-ui/ui-scripts/src/webpack.config.js

@@ -25,7 +25,6 @@ const path = require("path");
 const fs = require("fs");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const WorkerPlugin = require("worker-plugin");
 
 const createIndexMiddleware = require("./middleware/IndexMiddleware");
 const createContextPathMiddleware = require("./middleware/ContextPathMiddleware");
@@ -34,7 +33,7 @@ const isDevelopment = process.env.NODE_ENV === "development";
 const root = path.resolve(process.cwd(), "scm-ui");
 
 const babelPlugins = [];
-const webpackPlugins = [new WorkerPlugin()];
+const webpackPlugins = [];
 
 let mode = "production";
 
@@ -56,29 +55,26 @@ const themes = fs
 
 console.log(`build ${mode} bundles`);
 
+const base = {
+  mode,
+  context: root,
+  target: "web",
+  resolveLoader: {
+    modules: [path.join(__dirname, "..", "node_modules"), "node_modules"],
+    extensions: [".js", ".json"],
+    mainFields: ["loader", "main"]
+  }
+};
+
 module.exports = [
   {
-    mode,
-    stats: "minimal",
-    context: root,
+    ...base,
     entry: {
       webapp: [path.resolve(__dirname, "webpack-public-path.js"), "./ui-webapp/src/index.tsx"]
     },
-    devtool: "cheap-module-eval-source-map",
-    target: "web",
-    node: {
-      fs: "empty",
-      net: "empty",
-      tls: "empty"
-    },
+    devtool: "eval-cheap-module-source-map",
     module: {
       rules: [
-        {
-          parser: {
-            system: false,
-            systemjs: false
-          }
-        },
         {
           test: /\.(js|ts|jsx|tsx)$/i,
           exclude: /node_modules/,
@@ -119,7 +115,12 @@ module.exports = [
       ]
     },
     resolve: {
-      extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss", ".json"]
+      extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss", ".json"],
+      fallback: {
+        fs: false,
+        net: false,
+        tls: false
+      }
     },
     output: {
       path: path.join(root, "build", "webapp", "assets"),
@@ -127,16 +128,28 @@ module.exports = [
       chunkFilename: "[name].bundle.js"
     },
     devServer: {
-      contentBase: path.join(root, "ui-webapp", "public"),
-      compress: false,
+      static: [
+        {
+          directory: path.join(root, "ui-webapp", "public")
+        }
+      ],
+      client: {
+        overlay: {
+          errors: true,
+          warnings: false
+        }
+      },
       historyApiFallback: true,
-      overlay: true,
       port: 3000,
       hot: true,
-      before: app => {
+      devMiddleware: {
+        index: false,
+        publicPath: "/assets/"
+      },
+      onBeforeSetupMiddleware: ({ app }) => {
         app.use(createContextPathMiddleware("/scm"));
       },
-      after: app => {
+      onAfterSetupMiddleware: ({ app }) => {
         const templatePath = path.join(root, "ui-webapp", "public", "index.mustache");
         const stage = process.env.NODE_ENV || "DEVELOPMENT";
         const renderParams = {
@@ -144,19 +157,18 @@ module.exports = [
           scmStage: stage.toUpperCase()
         };
         app.use(createIndexMiddleware(templatePath, renderParams));
-      },
-      publicPath: "/assets/"
+      }
     },
     optimization: {
       runtimeChunk: "single",
-      namedChunks: true,
       splitChunks: {
-        chunks: "all",
+        chunks: "initial",
         cacheGroups: {
-          vendors: {
+          defaultVendors: {
             test: /[\\/]node_modules[\\/]/,
-            priority: -10
-            // chunks: chunk => chunk.name !== "polyfill"
+            priority: -10,
+            filename: "vendors~webapp.bundle.js",
+            reuseExistingChunk: true
           },
           default: {
             minChunks: 2,
@@ -169,8 +181,7 @@ module.exports = [
     plugins: webpackPlugins
   },
   {
-    mode,
-    context: root,
+    ...base,
     entry: themes,
     module: {
       rules: [
@@ -183,10 +194,6 @@ module.exports = [
             "css-loader",
             "sass-loader"
           ]
-        },
-        {
-          test: /\.(png|svg|jpg|gif|woff2?|eot|ttf)$/,
-          use: ["file-loader"]
         }
       ]
     },
@@ -197,6 +204,7 @@ module.exports = [
       })
     ],
     optimization: {
+      // TODO only on production?
       minimizer: [new OptimizeCSSAssetsPlugin({})]
     },
     output: {
@@ -205,8 +213,7 @@ module.exports = [
     }
   },
   {
-    mode,
-    context: path.resolve(root),
+    ...base,
     entry: {
       polyfills: "./ui-polyfill/src/index.js"
     },