Web console: Update webpack-dev-server v3 to v4 (#15555)

* init

* update usage

* revert licenses.yaml

* move the audience-annotations outside of the web console block

licenses.yaml

@@ -1888,6 +1888,19 @@ notices:
       Copyright 2015-2017 The Apache Software Foundation
 ---
 
+name: "audience-annotations"
+license_category: binary
+module: core
+license_name: Apache License version 2.0
+version: 0.12.0
+libraries:
+  - org.apache.yetus: audience-annotations
+notices:
+  - audience-annotations: |
+      Apache Yetus
+      Copyright 2008-2022 The Apache Software Foundation
+---
+
 name: Apache Zookeeper
 license_category: binary
 module: java-core
@@ -5490,19 +5503,6 @@ license_file_path: licenses/bin/lodash.MIT
 
 ---
 
-name: "audience-annotations"
-license_category: binary
-module: core
-license_name: Apache License version 2.0
-version: 0.12.0
-libraries:
-  - org.apache.yetus: audience-annotations
-notices:
-  - audience-annotations: |
-      Apache Yetus
-      Copyright 2008-2022 The Apache Software Foundation
----
-
 name: "loose-envify"
 license_category: binary
 module: web-console

web-console/package.json

@@ -46,7 +46,7 @@
     "prettify-check": "prettier --check '{src,e2e-tests}/**/*.{ts,tsx,scss}' './*.js'",
     "generate-licenses-file": "license-checker --production --json --out licenses.json",
     "check-licenses": "license-checker --production --onlyAllow 'Apache-1.1;Apache-2.0;BSD-2-Clause;BSD-3-Clause;0BSD;MIT;ISC;CC0-1.0' --summary",
-    "start": "webpack serve --hot --open"
+    "start": "webpack serve"
   },
   "engines": {
     "node": ">=16"
@@ -170,10 +170,10 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "webpack": "^5.76.0",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "overrides": {
     "@types/react": "$@types/react"

web-console/webpack.config.js

@@ -78,17 +78,21 @@ module.exports = env => {
       },
     },
     devServer: {
-      publicPath: '/public',
-      index: './index.html',
-      openPage: 'unified-console.html',
       host: '0.0.0.0',
       port: 18081,
+      hot: true,
+      static: {
+        directory: __dirname,
+      },
+      devMiddleware: {
+        publicPath: '/public',
+      },
+      open: 'unified-console.html',
       proxy: {
         '/status': proxyTarget,
         '/druid': proxyTarget,
         '/proxy': proxyTarget,
       },
-      transportMode: 'ws',
     },
     module: {
       rules: [