feat(build): webpack@5 and webpack-dev-server@4 (#7826)

SwaggerUI is now built using `webpack@5`, with dev support for `webpack-dev-server@4`
- ES Module output bundle path now points to `swagger-ui-es-bundle-core`, which does not include dependencies
- No change to CommonJS output bundle or path
- Now uses Asset Modules, which replaces `file-loader`, `raw-loader`, and `url-loader`
- Removed unused rules/loaders for `.woff | .woff2 | .ttf | .eot` fonts and html
- Node polyfills are no longer bundled with `webpack@5`, and must be loaded separately and/or use `resolve.fallback`. 
As an example, SwaggerUI loads `process`, `buffer`, and `stream-browserify` as `devDependencies` in order to build development and production bundles.

SwaggerUI-React
- Now imports `swagger-ui-es-bundle-core`, and similarly outputs `swagger-ui-es-bundle-core` to its `dist` directory

Dev notes:
- Order of execution matters for the production npm build scripts. `build-stylesheets` needs to get built first, 
then cleanup of any empty artifacts, before building the various production bundles
- `Dev-helpers` now relies on `HTMLWebpackPlugin` to inject css and bundle files

webpack/dev.babel.js

@@ -3,10 +3,16 @@
  */
 
 import path from "path"
-import { HotModuleReplacementPlugin } from "webpack"
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
+import HtmlWebpackPlugin from "html-webpack-plugin"
+import { HtmlWebpackSkipAssetsPlugin } from "html-webpack-skip-assets-plugin"
+
 import configBuilder from "./_config-builder"
 import styleConfig from "./stylesheets.babel"
 
+const projectBasePath = path.join(__dirname, "../")
+const isDevelopment = process.env.NODE_ENV !== "production"
+
 const devConfig = configBuilder(
   {
     minimize: false,
@@ -24,6 +30,7 @@ const devConfig = configBuilder(
         "./src/standalone/index.js",
       ],
       "swagger-ui": "./src/style/main.scss",
+      vendors: ["react-refresh/runtime"],
     },
 
     performance: {
@@ -31,25 +38,75 @@ const devConfig = configBuilder(
     },
 
     output: {
-      library: "[name]",
       filename: "[name].js",
       chunkFilename: "[id].js",
+      library: {
+        name: "[name]",
+        export: "default",
+      },
+      publicPath: "/",
     },
 
     devServer: {
-      port: 3200,
-      publicPath: "/",
-      disableHostCheck: true, // for development within VMs
-      stats: {
-        colors: true,
+      allowedHosts: "all", // for development within VMs
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
       },
-      hot: true,
-      contentBase: path.join(__dirname, "../", "dev-helpers"),
+      port: 3200,
       host: "0.0.0.0",
+      hot: true,
+      static: {
+        directory: path.resolve(projectBasePath, "dev-helpers"),
+        publicPath: "/",
+      },
+      client: {
+        logging: "info",
+        progress: true,
+      },
     },
 
-    plugins: [new HotModuleReplacementPlugin()],
-  }
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          include: [
+            path.join(projectBasePath, "src"),
+            path.join(projectBasePath, "node_modules", "object-assign-deep"),
+          ],
+          loader: "babel-loader",
+          options: {
+            retainLines: true,
+            cacheDirectory: true,
+            plugins: [isDevelopment && require.resolve("react-refresh/babel")].filter(Boolean),
+          },
+        },
+        {
+          test: /\.(txt|yaml)$/,
+          type: "asset/source",
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|svg)$/,
+          type: "asset/inline",
+        },
+      ],
+    },
+
+    plugins: [
+      isDevelopment && new ReactRefreshWebpackPlugin({ library: "[name]" }),
+      new HtmlWebpackPlugin({
+        template: path.join(projectBasePath, "dev-helpers", "index.html"),
+      }),
+      new HtmlWebpackSkipAssetsPlugin({
+        skipAssets: [/swagger-ui\.js/],
+      }),
+    ].filter(Boolean),
+
+    optimization: {
+      runtimeChunk: "single", // for multiple entry points using ReactRefreshWebpackPlugin
+    },
+  },
 )
 
 // mix in the style config's plugins and loader rules