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/_config-builder.js

@@ -3,7 +3,6 @@
  */
 
 import path from "path"
-import os from "os"
 import fs from "fs"
 import deepExtend from "deep-extend"
 import webpack from "webpack"
@@ -30,26 +29,13 @@ const baseRules = [
       cacheDirectory: true,
     },
   },
-  { test: /\.(txt|yaml)$/, loader: "raw-loader" },
+  { test: /\.(txt|yaml)$/,
+    type: "asset/source", 
+  },
   {
     test: /\.(png|jpg|jpeg|gif|svg)$/,
-    use: [
-      {
-        loader: "url-loader",
-        options: {
-          esModule: false,
-        },
-      },
-    ],
+    type: "asset/inline",
   },
-  {
-    test: /\.(woff|woff2)$/,
-    loader: "url-loader?",
-    options: {
-      limit: 10000,
-    },
-  },
-  { test: /\.(ttf|eot)$/, loader: "file-loader" },
 ]
 
 export default function buildConfig(
@@ -72,6 +58,10 @@ export default function buildConfig(
         BUILD_TIME: new Date().toUTCString(),
       }),
     }),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
   ]
 
   const completeConfig = deepExtend(
@@ -86,16 +76,16 @@ export default function buildConfig(
         publicPath: "/dist",
         filename: "[name].js",
         chunkFilename: "[name].js",
-        libraryTarget: "umd",
-        libraryExport: "default", // TODO: enable
+        globalObject: "this",
+        library: {
+          // when esm, library.name should be unset, so do not define here
+          // when esm, library.export should be unset, so do not define here
+          type: "umd",
+        }
       },
 
       target: "web",
 
-      node: {
-        // yaml-js has a reference to `fs`, this is a workaround
-        fs: "empty",
-      },
 
       module: {
         rules: baseRules,
@@ -132,6 +122,11 @@ export default function buildConfig(
           "lodash": path.resolve(__dirname, "..", "node_modules/lodash"),
           "isarray": path.resolve(__dirname, "..", "node_modules/stream-browserify/node_modules/isarray"),
           "react-is": path.resolve(__dirname, "..", "node_modules/react-redux/node_modules/react-is"),
+          "safe-buffer": path.resolve(__dirname, "..", "node_modules/string_decoder/node_modules/safe-buffer"),
+        },
+        fallback: {
+          fs: false,
+          stream: require.resolve("stream-browserify"),
         },
       },
 
@@ -139,8 +134,8 @@ export default function buildConfig(
       // Otherwise, provide heavy souremaps suitable for development
       devtool: sourcemaps
         ? minimize
-          ? "nosource-source-map"
-          : "module-source-map"
+          ? "nosources-source-map"
+          : "cheap-module-source-map"
         : false,
 
       performance: {
@@ -154,8 +149,6 @@ export default function buildConfig(
         minimizer: [
           compiler =>
             new TerserPlugin({
-              cache: true,
-              sourceMap: sourcemaps,
               terserOptions: {
                 mangle: !!mangle,
               },

webpack/bundle.babel.js

@@ -30,7 +30,10 @@ const result = configBuilder(
     },
     output: {
       globalObject: "this",
-      library: "SwaggerUIBundle",
+      library: {
+        name: "SwaggerUIBundle",
+        export: "default",
+      },
     },
     plugins: [
       new DuplicatesPlugin({
@@ -44,7 +47,7 @@ const result = configBuilder(
       //   filename: path.join("log.bundle-stats.swagger-ui.json"),
       //   fields: null,
       // }),
-    ]
+    ],
   }
 )
 

webpack/core.babel.js

@@ -20,7 +20,10 @@ const result = configBuilder(
 
     output: {
       globalObject: "this",
-      library: "SwaggerUICore",
+      library: {
+        name: "SwaggerUICore",
+        export: "default",
+      },
     },
   }
 )

webpack/dev-e2e.babel.js

@@ -2,17 +2,75 @@
  * @prettier
  */
 
-// The standard dev config doesn't allow overriding contentBase via the CLI,
-// which we do in the npm scripts for e2e tests. 
-//
-// This variant avoids contentBase in the config, so the CLI values take hold.
+import path from "path"
 
-import devConfig from "./dev.babel"
+import configBuilder from "./_config-builder"
+import styleConfig from "./stylesheets.babel"
 
-// set the common e2e port 3230
-devConfig.devServer.port = 3230
+// Pretty much the same as devConfig, but with changes to port and static.directory
+const devE2eConfig = configBuilder(
+  {
+    minimize: false,
+    mangle: false,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    mode: "development",
+    entry: {
+      "swagger-ui-bundle": [
+        "./src/core/index.js",
+      ],
+      "swagger-ui-standalone-preset": [
+        "./src/standalone/index.js",
+      ],
+      "swagger-ui": "./src/style/main.scss",
+    },
 
-// unset contentBase
-delete devConfig.devServer.contentBase
+    performance: {
+      hints: false
+    },
 
-export default devConfig
+    output: {
+      filename: "[name].js",
+      chunkFilename: "[id].js",
+      library: {
+        name: "[name]",
+        export: "default",
+      },
+      publicPath: "/",
+    },
+
+    devServer: {
+      allowedHosts: "all", // for development within VMs
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
+      },
+      port: 3230,
+      host: "0.0.0.0",
+      hot: true,
+      static: {
+        directory: path.join(__dirname, "../", "test", "e2e-cypress", "static"),
+        publicPath: "/",
+      },
+      client: {
+        logging: "info",
+        progress: true,
+      },
+      devMiddleware: {},
+    },
+  },
+)
+
+// mix in the style config's plugins and loader rules
+
+devE2eConfig.plugins = [...devE2eConfig.plugins, ...styleConfig.plugins]
+
+devE2eConfig.module.rules = [
+  ...devE2eConfig.module.rules,
+  ...styleConfig.module.rules,
+]
+
+export default devE2eConfig

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

webpack/es-bundle-core.babel.js

@@ -29,9 +29,10 @@ const result = configBuilder(
       ],
     },
     output: {
-      globalObject: "this",
-      library: "SwaggerUIBundle",
-      libraryTarget: "commonjs2",
+      library: {
+        type: "commonjs2",
+        export: "default",
+      },
     },
     plugins: [
       new DuplicatesPlugin({

webpack/es-bundle.babel.js

@@ -30,8 +30,10 @@ const result = configBuilder(
     },
     output: {
       globalObject: "this",
-      library: "SwaggerUIBundle",
-      libraryTarget: "commonjs2",
+      library: {
+        type: "commonjs2",
+        export: "default",
+      },
     },
     plugins: [
       new DuplicatesPlugin({

webpack/standalone.babel.js

@@ -17,7 +17,10 @@ const result = configBuilder(
 
     output: {
       globalObject: "this",
-      library: "SwaggerUIStandalonePreset",
+      library: {
+        name: "SwaggerUIStandalonePreset",
+        export: "default",
+      },
     },
   }
 )

webpack/stylesheets.babel.js

@@ -7,7 +7,6 @@
 
 import path from "path"
 import MiniCssExtractPlugin from "mini-css-extract-plugin"
-import IgnoreAssetsPlugin from "ignore-assets-webpack-plugin"
 
 export default {
   mode: "production",
@@ -60,11 +59,6 @@ export default {
     new MiniCssExtractPlugin({
       filename: "[name].css",
     }),
-    new IgnoreAssetsPlugin({
-      // This is a hack to avoid a Webpack/MiniCssExtractPlugin bug, for more
-      // info see https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
-      ignore: ["swagger-ui.js", "swagger-ui.js.map"],
-    }),
   ],
 
   devtool: "source-map",