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
swagger-api · Mar 1, 2022 · 07d346b · 07d346b
1 parent 6534f10
commit 07d346b
Show file tree

Hide file tree

Showing 18 changed files with 27,192 additions and 4,731 deletions.
diff --git a/dev-helpers/index.html b/dev-helpers/index.html
@@ -5,9 +5,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Swagger UI</title>
-  <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
-  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
-  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
   <style>
     html
     {
@@ -34,8 +31,6 @@
 <body>
   <div id="swagger-ui"></div>
 
-  <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
-  <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
   <script>
     window.onload = function() {
       window["SwaggerUIBundle"] = window["swagger-ui-bundle"]

diff --git a/dist/swagger-ui.js b/dist/swagger-ui.js
diff --git a/dist/swagger-ui.js.map b/dist/swagger-ui.js.map
diff --git a/flavors/swagger-ui-react/index.jsx b/flavors/swagger-ui-react/index.jsx
@@ -1,6 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-import swaggerUIConstructor, {presets} from "./swagger-ui"
+import swaggerUIConstructor, {presets} from "./swagger-ui-es-bundle-core"
 export default class SwaggerUI extends React.Component {
   constructor (props) {
     super(props)

diff --git a/flavors/swagger-ui-react/release/run.sh b/flavors/swagger-ui-react/release/run.sh
@@ -9,10 +9,8 @@ cd "${0%/*}"
 mkdir -p ../dist
 
 # Copy UI's dist files to our directory
-cp ../../../dist/swagger-ui.js ../dist
-cp ../../../dist/swagger-ui.js.map ../dist
-cp ../../../dist/swagger-ui-es-bundle.js ../dist
-cp ../../../dist/swagger-ui-es-bundle.js.map ../dist
+cp ../../../dist/swagger-ui-es-bundle-core.js ../dist
+cp ../../../dist/swagger-ui-es-bundle-core.js.map ../dist
 cp ../../../dist/swagger-ui.css ../dist
 cp ../../../dist/swagger-ui.css.map ../dist
 

diff --git a/flavors/swagger-ui-react/release/template.json b/flavors/swagger-ui-react/release/template.json
@@ -28,6 +28,13 @@
   "name": "swagger-ui-react",
   "main": "commonjs.js",
   "module": "index.js",
+  "exports": {
+    "./swagger-ui.css": "./swagger-ui.css",
+    ".": {
+      "import": "./index.js",
+      "require": "./commonjs.js"
+    }
+  },
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
     "(in alphabetical order)",