chore: updating some packages to get ready for webpack5

Signed-off-by: blam <ben@blam.sh>

packages/cli/package.json

@@ -100,8 +100,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-pluginutils": "^2.8.2",
+    "run-script-webpack-plugin": "^0.0.11",
     "semver": "^7.3.2",
-    "start-server-webpack-plugin": "^2.2.5",
     "style-loader": "^1.2.1",
     "sucrase": "^3.18.2",
     "tar": "^6.1.2",
@@ -109,8 +109,8 @@
     "ts-loader": "^8.0.17",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.0",
-    "webpack": "^4.41.6",
-    "webpack-dev-server": "3.11.0",
+    "webpack": "^5.0.0",
+    "webpack-dev-server": "^3.11.2",
     "webpack-node-externals": "^3.0.0",
     "yaml": "^1.10.0",
     "yaml-jest": "^1.0.5",
@@ -140,8 +140,7 @@
     "@types/rollup-plugin-peer-deps-external": "^2.2.0",
     "@types/rollup-plugin-postcss": "^2.0.0",
     "@types/tar": "^4.0.3",
-    "@types/webpack": "^4.41.7",
-    "@types/webpack-dev-server": "^3.11.0",
+    "@types/webpack-dev-server": "^3.11.2",
     "@types/yarnpkg__lockfile": "^1.1.4",
     "del": "^6.0.0",
     "mock-fs": "^4.13.0",

packages/cli/src/lib/bundler/bundle.ts

@@ -87,24 +87,26 @@ export async function buildBundle(options: BuildOptions) {
 }
 
 async function build(compiler: webpack.Compiler, isCi: boolean) {
-  const stats = await new Promise<webpack.Stats>((resolve, reject) => {
-    compiler.run((err, buildStats) => {
-      if (err) {
-        if (err.message) {
-          const { errors } = formatWebpackMessages({
-            errors: [err.message],
-            warnings: new Array<string>(),
-          } as webpack.Stats.ToJsonOutput);
+  const stats = await new Promise<webpack.Stats | undefined>(
+    (resolve, reject) => {
+      compiler.run((err, buildStats) => {
+        if (err) {
+          if (err.message) {
+            const { errors } = formatWebpackMessages({
+              errors: [err.message],
+              warnings: new Array<string>(),
+            });
 
-          throw new Error(errors[0]);
+            throw new Error(errors[0]);
+          } else {
+            reject(err);
+          }
         } else {
-          reject(err);
+          resolve(buildStats);
         }
-      } else {
-        resolve(buildStats);
-      }
-    });
-  });
+      });
+    },
+  );
 
   const { errors, warnings } = formatWebpackMessages(
     stats.toJson({ all: false, warnings: true, errors: true }),

packages/cli/src/lib/bundler/config.ts

@@ -19,7 +19,7 @@ import { resolve as resolvePath } from 'path';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';
-import StartServerPlugin from 'start-server-webpack-plugin';
+import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';
 import webpack from 'webpack';
 import nodeExternals from 'webpack-node-externals';
 import { isChildPath } from '@backstage/cli-common';
@@ -300,7 +300,7 @@ export async function createBackendConfig(
         : {}),
     },
     plugins: [
-      new StartServerPlugin({
+      new RunScriptWebpackPlugin({
         name: 'main.js',
         nodeArgs: options.inspectEnabled ? ['--inspect'] : undefined,
       }),
@@ -346,11 +346,7 @@ function nodeExternalsWithResolve(
     },
   });
 
-  return (
-    context: string,
-    request: string,
-    callback: webpack.ExternalsFunctionCallback,
-  ) => {
+  return (context: string, request: string, callback: webpack.Externa) => {
     currentContext = context;
     return externals(context, request, callback);
   };