build(ui): upgrade to Webpack v5 + upgrade loaders + plugins (#11628)

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
argoproj · Aug 23, 2023 · aac4f89 · aac4f89
1 parent efb1181
commit aac4f89
Show file tree

Hide file tree

Showing 3 changed files with 650 additions and 1,465 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -63,20 +63,19 @@
         "@types/uuid": "^9.0.1",
         "babel-jest": "^29.6.2",
         "babel-loader": "^8.3.0",
-        "copy-webpack-plugin": "^5.1.2",
+        "copy-webpack-plugin": "^11.0.0",
         "copyfiles": "^2.4.1",
-        "file-loader": "^6.2.0",
         "glob": "^10.3.3",
-        "html-webpack-plugin": "^4.5.2",
+        "html-webpack-plugin": "^5.5.3",
         "jest": "^26.6.3",
         "monaco-editor-webpack-plugin": "^6.0.0",
         "prettier": "^1.19.1",
-        "raw-loader": "^0.5.1",
+        "raw-loader": "^4.0.2",
         "react-hot-loader": "^4.13.1",
         "sass": "^1.66.1",
-        "sass-loader": "^10.1.0",
+        "sass-loader": "^13.3.2",
         "source-map-loader": "^1.1.3",
-        "style-loader": "^0.20.1",
+        "style-loader": "^1.3.0",
         "ts-jest": "^26.4.4",
         "ts-loader": "^7.0.4",
         "ts-node": "^9.1.1",
@@ -86,8 +85,8 @@
         "tslint-react": "^3.4.0",
         "typescript": "^4.6.4",
         "webfonts-generator": "^0.4.0",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^4.10.0",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.0"
     },
     "resolutions": {
@@ -96,7 +95,6 @@
         "fast-json-patch": "3.1.1",
         "lodash": "4.17.21",
         "prismjs": "1.27.0",
-        "react-toastify": "9.0.3",
         "semver": "^7.5.2"
     }
 }
diff --git a/ui/src/app/webpack.config.js b/ui/src/app/webpack.config.js
@@ -20,44 +20,45 @@ const config = {
     main: "./src/app/index.tsx"
   },
   output: {
-    filename: "[name].[hash].js",
+    filename: "[name].[contenthash].js",
     path: __dirname + "/../../dist/app"
   },
 
   devtool: "source-map",
 
   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".json", ".ttf"]
+    extensions: [".ts", ".tsx", ".js", ".json", ".ttf"],
+    fallback: { fs: false }, // ignore `node:fs` on front-end
   },
 
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        loaders: [...(isProd ? [] : ["react-hot-loader/webpack"]), `ts-loader?transpileOnly=${!isProd}&allowTsInNodeModules=true&configFile=${path.resolve("./src/app/tsconfig.json")}`]
+        use: [...(isProd ? [] : ["react-hot-loader/webpack"]), `ts-loader?transpileOnly=${!isProd}&allowTsInNodeModules=true&configFile=${path.resolve("./src/app/tsconfig.json")}`]
       }, {
         enforce: 'pre',
         exclude: [
           /node_modules\/react-paginate/,
           /node_modules\/monaco-editor/,
         ],
         test: /\.js$/,
-        loaders: [...(isProd ? ['babel-loader'] : ['source-map-loader'])],
+        use: [...(isProd ? ["babel-loader"] : ["source-map-loader"])],
       }, {
         test: /\.scss$/,
-        loader: "style-loader!raw-loader!sass-loader"
+        use: ["style-loader", "raw-loader", "sass-loader"],
       }, {
         test: /\.css$/,
-        loader: "style-loader!raw-loader"
+        use: ["style-loader", "raw-loader"],
       }, {
-        test: /\.ttf$/,
-        use: ['file-loader']
-      }
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      }, {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
     ]
   },
-  node: {
-    fs: "empty"
-  },
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
@@ -67,22 +68,24 @@ const config = {
       "process.env.DEFAULT_TZ": JSON.stringify("UTC"),
     }),
     new HtmlWebpackPlugin({ template: "src/app/index.html" }),
-    new CopyWebpackPlugin([{
-      from: "node_modules/argo-ui/src/assets",
-      to: "assets"
-    }, {
-      from: "node_modules/@fortawesome/fontawesome-free/webfonts",
-      to: "assets/fonts"
-    }, {
-      from: "../api/openapi-spec/swagger.json",
-      to: "assets/openapi-spec/swagger.json"
-    }, {
-      from: "../api/jsonschema/schema.json",
-      to: "assets/jsonschema/schema.json"
-    }, {
-      from: 'node_modules/monaco-editor/min/vs/base/browser/ui/codiconLabel/codicon/codicon.ttf',
-      to: "."
-    }]),
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: "node_modules/argo-ui/src/assets",
+        to: "assets"
+      }, {
+        from: "node_modules/@fortawesome/fontawesome-free/webfonts",
+        to: "assets/fonts"
+      }, {
+        from: "../api/openapi-spec/swagger.json",
+        to: "assets/openapi-spec/swagger.json"
+      }, {
+        from: "../api/jsonschema/schema.json",
+        to: "assets/jsonschema/schema.json"
+      }, {
+        from: "node_modules/monaco-editor/min/vs/base/browser/ui/codiconLabel/codicon/codicon.ttf",
+        to: "."
+      }],
+    }),
     new MonacoWebpackPlugin({ languages: ["json", "yaml"] })
   ],
   devServer: {