Update to webpack 5 in supervisor frontend (#18552)

* Update to webpack 5 in supervisor frontend

* Fix

* Fix

Author: jeanp413

components/supervisor/frontend/package.json

@@ -5,24 +5,25 @@
   "version": "0.0.0",
   "dependencies": {
     "@gitpod/gitpod-protocol": "0.1.5",
-    "@gitpod/supervisor-api-grpc": "0.1.5"
+    "@gitpod/supervisor-api-grpc": "0.1.5",
+    "crypto-browserify": "3.12.0",
+    "stream-browserify": "^2.0.1",
+    "url": "^0.11.1",
+    "util": "^0.11.1",
+    "buffer": "^4.3.0",
+    "process": "^0.11.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.0",
-    "@babel/plugin-transform-classes": "^7.10.0",
-    "@babel/plugin-transform-runtime": "^7.10.0",
-    "@babel/preset-env": "^7.10.0",
     "@types/sharedworker": "^0.0.29",
     "@types/trusted-types": "^2.0.0",
-    "babel-loader": "^8.1.0",
-    "concurrently": "^5.3.0",
-    "copy-webpack-plugin": "^6.2.0",
-    "css-loader": "^0.28.11",
-    "source-map-loader": "^1.1.0",
-    "style-loader": "^0.23.1",
+    "concurrently": "^6.2.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.3",
     "typescript": "~4.4.2",
-    "webpack": "^4.40.0",
-    "webpack-cli": "^3.1.1"
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0"
   },
   "scripts": {
     "build": "tsc && webpack --mode=production",

components/supervisor/frontend/tsconfig.json

@@ -3,7 +3,7 @@
     "rootDir": "src",
     "outDir": "lib",
     "module": "commonjs",
-    "target": "es6",
+    "target": "ES2021",
     "lib": [
       "es6",
       "dom"
@@ -17,4 +17,4 @@
   "include": [
     "src"
   ]
-}
+}

components/supervisor/frontend/webpack.config.js

@@ -6,10 +6,12 @@
 
 // @ts-check
 
+const webpack = require("webpack");
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
+    target: "web",
     entry: {
         main: path.resolve(__dirname, "lib/index.js"),
     },
@@ -24,44 +26,24 @@ module.exports = {
                 test: /\.css$/i,
                 use: ["style-loader", "css-loader"],
             },
-            {
-                test: /\\.js$/,
-                enforce: "pre",
-                loader: "source-map-loader",
-            },
-            {
-                test: /\.js$/,
-                // include only es6 dependencies to transpile them to es5 classes
-                include: /vscode-ws-jsonrpc|vscode-jsonrpc|vscode-languageserver-protocol|vscode-languageserver-types/,
-                use: {
-                    loader: "babel-loader",
-                    options: {
-                        presets: ["@babel/preset-env"],
-                        plugins: [
-                            // reuse runtime babel lib instead of generating it in each js file
-                            "@babel/plugin-transform-runtime",
-                            // ensure that classes are transpiled
-                            "@babel/plugin-transform-classes",
-                        ],
-                        // see https://github.com/babel/babel/issues/8900#issuecomment-431240426
-                        sourceType: "unambiguous",
-                        cacheDirectory: true,
-                    },
-                },
-            },
         ],
     },
-    node: {
-        fs: "empty",
-        child_process: "empty",
-        net: "empty",
-        crypto: true,
-        tls: "empty",
+    resolve: {
+        fallback: {
+            crypto: require.resolve("crypto-browserify"),
+            stream: require.resolve("stream-browserify"),
+            url: require.resolve("url"),
+            util: require.resolve("util"),
+        },
     },
     devtool: "source-map",
     plugins: [
         new CopyWebpackPlugin({
             patterns: [{ from: "public", to: "." }],
         }),
+        new webpack.ProvidePlugin({
+            process: "process/browser",
+            Buffer: ["buffer", "Buffer"],
+        }),
     ],
 };