deps(ui): Upgrade webpack dev server, terser (#69150)

Author: scttcper

package.json

@@ -50,7 +50,7 @@
     "@react-stately/tabs": "^3.6.3",
     "@react-stately/tree": "^3.7.5",
     "@react-types/shared": "^3.22.0",
-    "@rsdoctor/webpack-plugin": "^0.1.0",
+    "@rsdoctor/webpack-plugin": "^0.1.10",
     "@sentry-internal/global-search": "^0.5.7",
     "@sentry-internal/react-inspector": "6.0.1-4",
     "@sentry-internal/rrweb": "2.12.0",
@@ -92,7 +92,7 @@
     "@types/react-virtualized": "^9.21.22",
     "@types/reflux": "0.4.1",
     "@types/scroll-to-element": "^2.0.2",
-    "@types/webpack-env": "^1.18.0",
+    "@types/webpack-env": "^1.18.4",
     "ansi-to-react": "^6.1.6",
     "babel-loader": "^9.1.2",
     "babel-plugin-add-react-displayname": "^0.0.5",
@@ -101,7 +101,7 @@
     "cbor-web": "^8.1.0",
     "classnames": "2.3.1",
     "color": "^4.2.3",
-    "compression-webpack-plugin": "11.0.0",
+    "compression-webpack-plugin": "11.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "core-js": "^3.33.0",
     "cronstrue": "^2.26.0",
@@ -169,15 +169,15 @@
     "typescript": "^5.4.5",
     "u2f-api": "1.0.10",
     "url-loader": "^4.1.1",
-    "webpack": "5.90.1",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
     "webpack-remove-empty-scripts": "^1.0.4",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.0",
     "@codecov/webpack-plugin": "^0.0.1-beta.6",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@sentry/jest-environment": "^4.0.0",
     "@sentry/profiling-node": "^7.109.0",
     "@styled/typescript-styled-plugin": "^1.0.1",
@@ -202,9 +202,9 @@
     "react-refresh": "0.14.0",
     "stylelint": "16.2.1",
     "stylelint-config-recommended": "^14.0.0",
-    "terser": "5.27.0",
+    "terser": "5.30.3",
     "tsconfig-paths": "^4.2.0",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "5.0.4"
   },
   "optionalDependencies": {
     "fsevents": "^2.3.2"

webpack.config.ts

@@ -13,7 +13,11 @@ import fs from 'node:fs';
 import path from 'node:path';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
-import type {Configuration as DevServerConfig} from 'webpack-dev-server';
+import type {
+  Configuration as DevServerConfig,
+  ProxyConfigArray,
+  Static,
+} from 'webpack-dev-server';
 import FixStyleOnlyEntriesPlugin from 'webpack-remove-empty-scripts';
 
 import LastBuiltPlugin from './build-utils/last-built-plugin';
@@ -576,46 +580,59 @@ if (
 
     // If we're running siloed servers we also need to proxy
     // those requests to the right server.
-    let controlSiloProxy = {};
+    let controlSiloProxy: ProxyConfigArray = [];
     if (CONTROL_SILO_PORT) {
       // TODO(hybridcloud) We also need to use this URL pattern
       // list to select control/region when making API requests in non-proxied
       // environments (like production). We'll likely need a way to consolidate this
       // with the configuration api.Client uses.
       const controlSiloAddress = `http://127.0.0.1:${CONTROL_SILO_PORT}`;
-      controlSiloProxy = {
-        '/auth/**': controlSiloAddress,
-        '/account/**': controlSiloAddress,
-        '/api/0/users/**': controlSiloAddress,
-        '/api/0/api-tokens/**': controlSiloAddress,
-        '/api/0/sentry-apps/**': controlSiloAddress,
-        '/api/0/organizations/*/audit-logs/**': controlSiloAddress,
-        '/api/0/organizations/*/broadcasts/**': controlSiloAddress,
-        '/api/0/organizations/*/integrations/**': controlSiloAddress,
-        '/api/0/organizations/*/config/integrations/**': controlSiloAddress,
-        '/api/0/organizations/*/sentry-apps/**': controlSiloAddress,
-        '/api/0/organizations/*/sentry-app-installations/**': controlSiloAddress,
-        '/api/0/api-authorizations/**': controlSiloAddress,
-        '/api/0/api-applications/**': controlSiloAddress,
-        '/api/0/doc-integrations/**': controlSiloAddress,
-        '/api/0/assistant/**': controlSiloAddress,
-      };
+      controlSiloProxy = [
+        {
+          context: [
+            '/auth/**',
+            '/account/**',
+            '/api/0/users/**',
+            '/api/0/api-tokens/**',
+            '/api/0/sentry-apps/**',
+            '/api/0/organizations/*/audit-logs/**',
+            '/api/0/organizations/*/broadcasts/**',
+            '/api/0/organizations/*/integrations/**',
+            '/api/0/organizations/*/config/integrations/**',
+            '/api/0/organizations/*/sentry-apps/**',
+            '/api/0/organizations/*/sentry-app-installations/**',
+            '/api/0/api-authorizations/**',
+            '/api/0/api-applications/**',
+            '/api/0/doc-integrations/**',
+            '/api/0/assistant/**',
+          ],
+          target: controlSiloAddress,
+        },
+      ];
     }
 
     appConfig.devServer = {
       ...appConfig.devServer,
       static: {
-        ...(appConfig.devServer.static as object),
+        ...(appConfig.devServer.static as Static),
         publicPath: '/_static/dist/sentry',
       },
       // syntax for matching is using https://www.npmjs.com/package/micromatch
-      proxy: {
+      proxy: [
         ...controlSiloProxy,
-        '/api/store/**': relayAddress,
-        '/api/{1..9}*({0..9})/**': relayAddress,
-        '/api/0/relays/outcomes/': relayAddress,
-        '!/_static/dist/sentry/**': backendAddress,
-      },
+        {
+          context: [
+            '/api/store/**',
+            '/api/{1..9}*({0..9})/**',
+            '/api/0/relays/outcomes/**',
+          ],
+          target: relayAddress,
+        },
+        {
+          context: ['!/_static/dist/sentry/**'],
+          target: backendAddress,
+        },
+      ],
     };
     appConfig.output!.publicPath = '/_static/dist/sentry/';
   }