housekeeping: upgrade to webpack@4 (via #5454)

* build new core webpack config

* fix exports in Webpack; use ESM syntax throughout

* add bundle config

* add standalone config

* add style config

* prettier...

* add dev config

* delete legacy webpack scripts

* rewire npm scripts to use new webpack configs

* cache babel-loader results

* fix e2e dev servers

* update core Webpack modules

* update loaders to latest

* remove unused loaders

* update Webpack plugins

* add mode flags to Webpack configs

* remove plugin invocations that are now production-standard in v4

* update webpack-cli

* add webpack perf size limit flags

* replace ExtractText with MiniCssExtract + IgnoreAssets

* UglifyJsPlugin -> TerserPlugin

* fix PostCSS processing

* enable Terser sourcemaps

* webpack/style -> webpack/stylesheets

.babelrc

@@ -19,7 +19,6 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-transform-modules-commonjs",
     ["@babel/plugin-transform-runtime", {
       "corejs": "2"
     }],
@@ -30,7 +29,6 @@
     [
       "babel-plugin-module-resolver",
       {
-        "root": ".",
         "alias": {
           "root": ".",
           "components": "./src/core/components",

make-webpack-config.js

@@ -1,164 +0,0 @@
-var path = require("path")
-
-var webpack = require("webpack")
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-const CopyWebpackPlugin = require("copy-webpack-plugin")
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
-var deepExtend = require("deep-extend")
-const {gitDescribeSync} = require("git-describe")
-const os = require("os")
-
-var pkg = require("./package.json")
-
-let gitInfo
-
-try {
-  gitInfo = gitDescribeSync(__dirname)
-} catch(e) {
-  gitInfo = {
-    hash: "noGit",
-    dirty: false
-  }
-}
-
-var commonRules = [
-  { test: /\.(js(x)?)(\?.*)?$/,
-    use: [{
-      loader: "babel-loader",
-      options: {
-        retainLines: true
-      }
-    }],
-    include: [
-      path.join(__dirname, "src"),
-      path.join(__dirname, "node_modules", "object-assign-deep"),
-    ]
-  },
-  { test: /\.(txt|yaml)(\?.*)?$/,
-    loader: "raw-loader" },
-  { test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/,
-    loader: "url-loader" },
-  { test: /\.(woff|woff2)(\?.*)?$/,
-    loader: "url-loader?limit=100000" },
-  { test: /\.(ttf|eot)(\?.*)?$/,
-    loader: "file-loader" }
-]
-
-module.exports = function(rules, options) {
-
-  // Special options, that have logic in this file
-  // ...with defaults
-  var specialOptions = deepExtend({}, {
-    hot: false,
-    separateStylesheets: true,
-    minimize: false,
-    mangle: false,
-    longTermCaching: false,
-    sourcemaps: false,
-  }, options._special)
-
-  var plugins = []
-
-  if( specialOptions.separateStylesheets ) {
-    plugins.push(new ExtractTextPlugin({
-      filename: "[name].css" + (specialOptions.longTermCaching ? "?[contenthash]" : ""),
-      allChunks: true
-    }))
-  }
-
-  if( specialOptions.minimize ) { // production mode
-
-    plugins.push(
-      new UglifyJsPlugin({
-        uglifyOptions: {
-          mangle: specialOptions.mangle,
-          compress: specialOptions.mangle ? {
-            dead_code: true
-          } : false,
-          beautify: !specialOptions.mangle,
-        },
-        
-        sourceMap: true,
-      }),
-      new webpack.LoaderOptionsPlugin({
-        options: {
-          context: __dirname
-        }
-      })
-    )
-
-    plugins.push( new webpack.NoEmitOnErrorsPlugin())
-
-  } else { // development mode
-    plugins.push(new CopyWebpackPlugin([ { from: "test/e2e-selenium/specs", to: "test-specs" } ]))
-  }
-
-  plugins.push(
-    new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV:  specialOptions.minimize ? JSON.stringify("production") : null,
-        WEBPACK_INLINE_STYLES: !specialOptions.separateStylesheets
-      },
-      "buildInfo": JSON.stringify({
-        PACKAGE_VERSION: (pkg.version),
-        GIT_COMMIT: gitInfo.hash,
-        GIT_DIRTY: gitInfo.dirty,
-        HOSTNAME: os.hostname(),
-        BUILD_TIME: new Date().toUTCString()
-      })
-    }))
-
-  delete options._special
-
-  var completeConfig = deepExtend({
-    entry: {},
-
-    output:  {
-      path: path.join(__dirname, "dist"),
-      publicPath: "/",
-      filename: "[name].js",
-      chunkFilename: "[name].js"
-    },
-
-    target: "web",
-
-    // yaml-js has a reference to `fs`, this is a workaround
-    node: {
-      fs: "empty"
-    },
-
-    module: {
-      rules: commonRules.concat(rules),
-    },
-
-    resolveLoader: {
-      modules: [path.join(__dirname, "node_modules")],
-    },
-
-    externals: {
-      "buffertools": true // json-react-schema/deeper depends on buffertools, which fails.
-    },
-
-    resolve: {
-      modules: [
-        path.join(__dirname, "./src"),
-        "node_modules"
-      ],
-      extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
-      alias: {
-        "js-yaml": "@kyleshockey/js-yaml"
-      }
-    },
-
-  devtool: specialOptions.sourcemaps ? (
-    // If we're mangling, size is a concern -- so use trace-only sourcemaps
-    // Otherwise, provide heavy souremaps suitable for development
-    specialOptions.minimize ? "nosource-source-map" : "cheap-module-source-map"
-  ): false,
-
-    plugins,
-
-  }, options)
-
-  return completeConfig
-}

package.json

@@ -15,16 +15,15 @@
   "license": "Apache-2.0",
   "scripts": {
     "automated-release": "release-it --config ./release/.release-it.json",
-    "build": "run-p --aggregate-output build-core build-bundle build-standalone",
+    "build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets",
-    "build-bundle": "webpack --config webpack-dist-bundle.config.js --colors",
+    "build-bundle": "webpack --colors --config webpack/bundle.babel.js",
-    "build-core": "webpack --config webpack-dist.config.js --colors",
+    "build-core": "webpack --colors --config webpack/core.babel.js",
-    "build-standalone": "webpack --config webpack-dist-standalone.config.js --colors",
+    "build-standalone": "webpack --colors --config webpack/standalone.babel.js",
+    "build-stylesheets": "webpack --colors --config webpack/stylesheets.babel.js",
     "predev": "npm install",
-    "dev": "npm-run-all --parallel hot-server",
+    "dev": "webpack-dev-server --config webpack/dev.babel.js",
-    "watch": "webpack --config webpack-watch.config.js --watch --progress",
-    "hot-server": "webpack-dev-server --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress --content-base dev-helpers/",
     "deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
-    "deps-size": "webpack -p --config webpack.check.js --json | webpack-bundle-size-analyzer >| $npm_package_config_deps_check_dir/sizes.txt",
+    "deps-size": "webpack -p --config webpack/bundle.babel.js --json | webpack-bundle-size-analyzer >| $npm_package_config_deps_check_dir/sizes.txt",
     "deps-check": "run-s deps-license deps-size",
     "lint": "eslint --cache --ext '.js,.jsx' src test",
     "lint-errors": "eslint --cache --quiet --ext '.js,.jsx' src test",
@@ -37,8 +36,8 @@
     "test-e2e-selenium": "sleep 3 && nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json",
     "e2e-initial-render": "nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json --group initial-render",
     "mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
-    "hot-e2e-cypress-server": "webpack-dev-server --port 3230 --content-base test/e2e-cypress/static --host 0.0.0.0 --config webpack-hot-dev-server.config.js",
+    "hot-e2e-cypress-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-cypress/static",
-    "hot-e2e-selenium-server": "webpack-dev-server --port 3230 --content-base test/e2e-selenium/helpers --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress",
+    "hot-e2e-selenium-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-selenium/helpers",
     "e2e-cypress": "run-p -r hot-e2e-cypress-server mock-api test-e2e-cypress",
     "e2e-selenium": "run-p -r hot-e2e-selenium-server mock-api test-e2e-selenium",
     "open-static": "node -e 'require(\"open\")(\"http://localhost:3002\")'",
@@ -86,7 +85,6 @@
     "@babel/plugin-proposal-class-properties": "^7.5.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
     "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -94,15 +92,15 @@
     "@babel/runtime-corejs2": "^7.0.0",
     "autoprefixer": "^8.4.1",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.0.6",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "body-parser": "^1.18.3",
     "bundlesize": "^0.17.2",
     "chromedriver": "^2.38.3",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^5.0.3",
     "cors": "^2.8.4",
-    "css-loader": "^0.28.11",
+    "css-loader": "^3.0.0",
     "cypress": "^3.3.1",
     "dedent": "^0.7.0",
     "deepmerge": "^2.1.0",
@@ -113,10 +111,10 @@
     "eslint-plugin-react": "^7.10.0",
     "expect": "^1.20.2",
     "express": "^4.16.4",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^4.0.0",
-    "file-loader": "^1.1.11",
     "git-describe": "^4.0.1",
     "http-server": "^0.11.1",
+    "ignore-assets-webpack-plugin": "^2.0.1",
     "imports-loader": "^0.8.0",
     "jsdom": "^11.10.0",
     "json-loader": "^0.5.7",
@@ -124,33 +122,31 @@
     "json-server": "^0.12.2",
     "less": "^3.0.2",
     "license-checker": "^19.0.0",
+    "mini-css-extract-plugin": "^0.7.0",
     "mocha": "^5.1.1",
     "nightwatch": "^0.9.16",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.2",
-    "null-loader": "0.1.1",
     "nyc": "^11.3.0",
     "oauth2-server": "^2.4.1",
     "open": "6.0.0",
-    "postcss-loader": "^2.1.5",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
     "prettier": "^1.18.2",
-    "raw-loader": "0.5.1",
+    "raw-loader": "3.0.0",
     "react-test-renderer": "^15.5.4",
     "release-it": "^7.6.1",
     "rimraf": "^2.6.0",
-    "sass-loader": "^7.0.1",
+    "sass-loader": "^7.1.0",
     "selenium-server-standalone-jar": "3.12.0",
     "standard": "^11.0.1",
-    "standard-loader": "^6.0.1",
-    "style-loader": "^0.21.0",
     "tachyons-sass": "^4.9.2",
-    "uglifyjs-webpack-plugin": "^1.2.5",
+    "terser-webpack-plugin": "^1.3.0",
-    "url-loader": "^1.0.1",
+    "url-loader": "^2.0.1",
-    "webpack": "^3.12.0",
+    "webpack": "^4.35.3",
     "webpack-bundle-size-analyzer": "^2.5.0",
-    "webpack-cli": "^2.0.4",
+    "webpack-cli": "^3.3.5",
-    "webpack-dev-server": "^2.11.5",
+    "webpack-dev-server": "^3.7.2"
-    "worker-loader": "^1.1.1"
   },
   "config": {
     "deps_check_dir": ".deps_check"

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: [
-    require("autoprefixer")
-  ]
-}

src/core/index.js

@@ -1,15 +1,10 @@
-// This file uses CommonJS require/exports syntax in order to export the SwaggerUI
+import deepExtend from "deep-extend"
-// function directly, instead of `{ default: fn SwaggerUI }`, which Babel would
-// generate if we used ESM syntax.
-
-const deepExtend = require("deep-extend")
-
-const System = require("core/system").default
-const ApisPreset = require("core/presets/apis").default
-const AllPlugins = require("core/plugins/all").default
-const { parseSearch } = require("core/utils")
-const win = require("core/window")
 
+import System from "./system"
+import ApisPreset from "./presets/apis"
+import AllPlugins from "./plugins/all"
+import { parseSearch } from "./utils"
+import win from "./window"
 
 if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
   win.Perf = require("react-dom/lib/ReactPerf")
@@ -18,7 +13,7 @@ if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
 // eslint-disable-next-line no-undef
 const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION, HOSTNAME, BUILD_TIME } = buildInfo
 
-module.exports = function SwaggerUI(opts) {
+export default function SwaggerUI(opts) {
 
   win.versions = win.versions || {}
   win.versions.swaggerUi = {
@@ -191,9 +186,9 @@ module.exports = function SwaggerUI(opts) {
 }
 
 // Add presets
-module.exports.presets = {
+SwaggerUI.presets = {
   apis: ApisPreset,
 }
 
 // All Plugins
-module.exports.plugins = AllPlugins
+SwaggerUI.plugins = AllPlugins

src/standalone/index.js

@@ -4,7 +4,7 @@ import ConfigsPlugin from "corePlugins/configs"
 
 // the Standalone preset
 
-let preset = [
+export default [
   TopbarPlugin,
   ConfigsPlugin,
   () => {
@@ -13,5 +13,3 @@ let preset = [
     }
   }
 ]
-
-module.exports = preset

webpack-dist-bundle.config.js

@@ -1,43 +0,0 @@
-const path = require("path")
-const styleRules = require("./webpack-dist-style.config.js")
-
-let rules = [
-  { test: /\.(worker\.js)(\?.*)?$/,
-    use: [
-      {
-        loader: "worker-loader",
-        options: {
-          inline: true,
-          name: "[name].js"
-        }
-      },
-      { loader: "babel-loader?retainLines=true" }
-    ]
-  }
-]
-
-module.exports = require("./make-webpack-config.js")(rules, {
-  _special: {
-    separateStylesheets: true,
-    minimize: true,
-    mangle: true,
-    sourcemaps: true,
-  },
-
-  entry: {
-    "swagger-ui-bundle": [
-      "./src/polyfills",
-      "./src/core/index.js"
-    ]
-  },
-
-  output:  {
-    path: path.join(__dirname, "dist"),
-    publicPath: "/dist",
-    library: "SwaggerUIBundle",
-    libraryTarget: "umd",
-    filename: "[name].js",
-    chunkFilename: "js/[name].js",
-  },
-
-})

webpack-dist-standalone.config.js

@@ -1,43 +0,0 @@
-const path = require("path")
-const styleRules = require("./webpack-dist-style.config.js")
-
-let rules = [
-  { test: /\.(worker\.js)(\?.*)?$/,
-    use: [
-      {
-        loader: "worker-loader",
-        options: {
-          inline: true,
-          name: "[name].js"
-        }
-      },
-      { loader: "babel-loader?retainLines=true" }
-    ]
-  }
-]
-
-module.exports = require("./make-webpack-config.js")(rules, {
-  _special: {
-    separateStylesheets: true,
-    minimize: true,
-    mangle: true,
-    sourcemaps: true,
-  },
-
-  entry: {
-    "swagger-ui-standalone-preset": [
-      "./src/polyfills",
-      "./src/standalone/index.js"
-    ]
-  },
-
-  output:  {
-    path: path.join(__dirname, "dist"),
-    publicPath: "/dist",
-    library: "SwaggerUIStandalonePreset",
-    libraryTarget: "umd",
-    filename: "[name].js",
-    chunkFilename: "js/[name].js",
-  },
-
-})

webpack-dist-style.config.js

@@ -1,34 +0,0 @@
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = [{ 
-  test: /\.(css)(\?.*)?$/,
-  use: ExtractTextPlugin.extract({
-    fallback: "style-loader",
-    use: [
-      "css-loader",
-      "postcss-loader"
-    ]
-  })
-},
-{ test: /\.(scss)(\?.*)?$/,
-  use: ExtractTextPlugin.extract({
-    fallback: "style-loader",
-    use: [
-      {
-        loader: "css-loader",
-        options: { minimize: true }
-      },
-      {
-        loader: "postcss-loader",
-        options: { sourceMap: true }
-      },
-      { loader: "sass-loader",
-        options: {
-          outputStyle: "expanded",
-          sourceMap: true,
-          sourceMapContents: "true"
-        }
-      }
-    ]
-  })
-}]

webpack-dist.config.js

@@ -1,58 +0,0 @@
-const path = require("path")
-const fs = require("fs")
-const nodeModules = fs.readdirSync("node_modules").filter(function(x) { return x !== ".bin" })
-const styleRules = require("./webpack-dist-style.config.js")
-
-let rules = [
-  { test: /\.(worker\.js)(\?.*)?$/,
-    use: [
-      {
-        loader: "worker-loader",
-        options: {
-          inline: true,
-          name: "[name].js"
-        }
-      },
-      { loader: "babel-loader?retainLines=true" }
-    ]
-  }
-]
-rules = rules.concat(styleRules)
-
-module.exports = require("./make-webpack-config.js")(rules, {
-  _special: {
-    separateStylesheets: true,
-    minimize: true,
-    // mangle: true, // TODO: enable
-    sourcemaps: true,
-  },
-
-  entry: {
-    "swagger-ui": [
-      "./src/style/main.scss",
-      "./src/polyfills", // TODO: remove?
-      "./src/core/index.js"
-    ]
-  },
-
-  externals: function(context, request, cb) {
-    // webpack injects some stuff into the resulting file,
-    // these libs need to be pulled in to keep that working.
-    var exceptionsForWebpack = ["ieee754", "base64-js"]
-    if(nodeModules.indexOf(request) !== -1 || exceptionsForWebpack.indexOf(request) !== -1) {
-      cb(null, "commonjs " + request)
-      return
-    }
-    cb()
-  },
-
-  output:  {
-    path: path.join(__dirname, "dist"),
-    publicPath: "/dist",
-    library: "SwaggerUICore",
-    libraryTarget: "umd",
-    filename: "[name].js",
-    chunkFilename: "js/[name].js",
-  },
-
-})

webpack-hot-dev-server.config.js

@@ -1,52 +0,0 @@
-const styleRules = require("./webpack-dist-style.config.js")
-
-const rules = [
-  { test: /\.(worker\.js)(\?.*)?$/,
-    use: [
-      {
-        loader: "worker-loader",
-        options: {
-          inline: true
-        }
-      },
-      { loader: "babel-loader?retainLines=true" }
-    ]
-  },
-  ...styleRules
-]
-
-module.exports = require("./make-webpack-config")(rules, {
-  _special: {
-    separateStylesheets: true,
-    sourcemaps: true,
-  },
-  entry: {
-    "swagger-ui": [
-      "./src/style/main.scss"
-    ],
-    "swagger-ui-bundle": [
-      "./src/polyfills",
-      "./src/core/index.js"
-    ],
-    "swagger-ui-standalone-preset": [
-      "./src/polyfills",
-      "./src/standalone/index.js",
-    ]
-  },
-  output: {
-    pathinfo: true,
-    filename: "[name].js",
-    library: "[name]",
-    libraryTarget: "umd",
-    chunkFilename: "[id].js"
-  },
-  devServer: {
-    port: 3200,
-    publicPath: "/",
-    noInfo: true,
-    disableHostCheck: true, // for development within VMs
-    stats: {
-      colors: true
-    },
-  },
-})

webpack-watch.config.js

@@ -1,8 +0,0 @@
-const config = require("./webpack-dist.config.js")
-
-config.plugins = config.plugins.filter(plugin => {
-  // Disable minification
-  return plugin.constructor.name !== "UglifyJsPlugin"
-})
-
-module.exports = config

webpack.check.js

@@ -1,12 +0,0 @@
-const path = require("path")
-const deepMerge = require("deepmerge")
-const webpackConfig = require("./webpack-dist-bundle.config.js")
-const DEPS_CHECK_DIR = require("./package.json").config.deps_check_dir
-
-module.exports = deepMerge(
-  webpackConfig, {
-    output: {
-      path: path.join(__dirname, DEPS_CHECK_DIR)
-    }
-  }
-)

webpack.config.js

@@ -1,3 +0,0 @@
-module.exports = require("./make-webpack-config")({
-
-})

webpack/_config-builder.js

@@ -0,0 +1,157 @@
+/**
+ * @prettier
+ */
+
+import path from "path"
+import os from "os"
+import fs from "fs"
+import deepExtend from "deep-extend"
+import webpack from "webpack"
+import TerserPlugin from "terser-webpack-plugin"
+
+import { getRepoInfo } from "./_helpers"
+import pkg from "../package.json"
+const nodeModules = fs.readdirSync("node_modules").filter(function(x) {
+  return x !== ".bin"
+})
+
+const projectBasePath = path.join(__dirname, "../")
+
+const baseRules = [
+  {
+    test: /\.jsx?$/,
+    include: [
+      path.join(projectBasePath, "src"),
+      path.join(projectBasePath, "node_modules", "object-assign-deep"),
+    ],
+    loader: "babel-loader",
+    options: {
+      retainLines: true,
+      cacheDirectory: true,
+    },
+  },
+  { test: /\.(txt|yaml)$/, loader: "raw-loader" },
+  { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url-loader" },
+  {
+    test: /\.(woff|woff2)$/,
+    loader: "url-loader?",
+    options: {
+      limit: 10000,
+    },
+  },
+  { test: /\.(ttf|eot)$/, loader: "file-loader" },
+]
+
+export default function buildConfig(
+  {
+    minimize = true,
+    mangle = true,
+    sourcemaps = true,
+    includeDependencies = true,
+  },
+  customConfig
+) {
+  const gitInfo = getRepoInfo()
+
+  var plugins = [
+    new webpack.DefinePlugin({
+      buildInfo: JSON.stringify({
+        PACKAGE_VERSION: pkg.version,
+        GIT_COMMIT: gitInfo.hash,
+        GIT_DIRTY: gitInfo.dirty,
+        HOSTNAME: os.hostname(),
+        BUILD_TIME: new Date().toUTCString(),
+      }),
+    }),
+  ]
+
+  const completeConfig = deepExtend(
+    {},
+    {
+      mode: "production",
+
+      entry: {},
+
+      output: {
+        path: path.join(projectBasePath, "dist"),
+        publicPath: "/dist",
+        filename: "[name].js",
+        chunkFilename: "[name].js",
+        libraryTarget: "umd",
+        libraryExport: "default", // TODO: enable
+      },
+
+      target: "web",
+
+      node: {
+        // yaml-js has a reference to `fs`, this is a workaround
+        fs: "empty",
+      },
+
+      module: {
+        rules: baseRules,
+      },
+
+      externals: includeDependencies
+        ? {
+            // json-react-schema/deeper depends on buffertools, which fails.
+            buffertools: true,
+          }
+        : (context, request, cb) => {
+            // webpack injects some stuff into the resulting file,
+            // these libs need to be pulled in to keep that working.
+            var exceptionsForWebpack = ["ieee754", "base64-js"]
+            if (
+              nodeModules.indexOf(request) !== -1 ||
+              exceptionsForWebpack.indexOf(request) !== -1
+            ) {
+              cb(null, "commonjs " + request)
+              return
+            }
+            cb()
+          },
+
+      resolve: {
+        modules: [path.join(projectBasePath, "./src"), "node_modules"],
+        extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
+        alias: {
+          "js-yaml": "@kyleshockey/js-yaml", // TODO: fix??
+        },
+      },
+
+      // If we're mangling, size is a concern -- so use trace-only sourcemaps
+      // Otherwise, provide heavy souremaps suitable for development
+      devtool: sourcemaps
+        ? minimize
+          ? "nosource-source-map"
+          : "module-source-map"
+        : false,
+
+      performance: {
+        hints: "error",
+        maxEntrypointSize: 1024000,
+        maxAssetSize: 1024000,
+      },
+
+      optimization: {
+        minimize: !!minimize,
+        minimizer: [
+          compiler =>
+            new TerserPlugin({
+              cache: true,
+              sourceMap: sourcemaps,
+              terserOptions: {
+                mangle: !!mangle,
+              },
+            }).apply(compiler)
+        ],
+      },
+    },
+    customConfig
+  )
+
+  // deepExtend mangles Plugin instances, this doesn't
+  completeConfig.plugins = plugins.concat(customConfig.plugins || [])
+
+  return completeConfig
+}

webpack/_helpers.js

@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+
+import { gitDescribeSync } from "git-describe"
+
+export function getRepoInfo() {
+  try {
+    return gitDescribeSync(__dirname)
+  } catch (e) {
+    console.error(e)
+    return {
+      hash: "noGit",
+      dirty: false,
+    }
+  }
+}

webpack/bundle.babel.js

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+
+import configBuilder from "./_config-builder"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    entry: {
+      "swagger-ui-bundle": [
+        "./src/polyfills.js", // TODO: remove?
+        "./src/core/index.js",
+      ],
+    },
+
+    output: {
+      library: "SwaggerUIBundle",
+    },
+  }
+)
+
+export default result

webpack/core.babel.js

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+
+import configBuilder from "./_config-builder"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+    includeDependencies: false,
+  },
+  {
+    entry: {
+      "swagger-ui": [
+        "./src/polyfills.js", // TODO: remove?
+        "./src/core/index.js",
+      ],
+    },
+
+    output: {
+      library: "SwaggerUICore",
+    },
+  }
+)
+
+export default result

webpack/dev-e2e.babel.js

@@ -0,0 +1,18 @@
+/**
+ * @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 devConfig from "./dev.babel"
+
+// set the common e2e port 3230
+devConfig.devServer.port = 3230
+
+// unset contentBase
+delete devConfig.devServer.contentBase
+
+export default devConfig

webpack/dev.babel.js

@@ -0,0 +1,66 @@
+/**
+ * @prettier
+ */
+
+import path from "path"
+import { HotModuleReplacementPlugin } from "webpack"
+import configBuilder from "./_config-builder"
+import styleConfig from "./stylesheets.babel"
+
+const devConfig = configBuilder(
+  {
+    minimize: false,
+    mangle: false,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    mode: "development",
+    entry: {
+      "swagger-ui-bundle": [
+        "./src/polyfills.js", // TODO: remove?
+        "./src/core/index.js",
+      ],
+      "swagger-ui-standalone-preset": [
+        "./src/polyfills", // TODO: remove?
+        "./src/standalone/index.js",
+      ],
+      "swagger-ui": "./src/style/main.scss",
+    },
+
+    performance: {
+      hints: false
+    },
+
+    output: {
+      library: "[name]",
+      filename: "[name].js",
+      chunkFilename: "[id].js",
+    },
+
+    devServer: {
+      port: 3200,
+      publicPath: "/",
+      disableHostCheck: true, // for development within VMs
+      stats: {
+        colors: true,
+      },
+      hot: true,
+      contentBase: path.join(__dirname, "../", "dev-helpers"),
+      host: "0.0.0.0",
+    },
+
+    plugins: [new HotModuleReplacementPlugin()],
+  }
+)
+
+// mix in the style config's plugins and loader rules
+
+devConfig.plugins = [...devConfig.plugins, ...styleConfig.plugins]
+
+devConfig.module.rules = [
+  ...devConfig.module.rules,
+  ...styleConfig.module.rules,
+]
+
+export default devConfig

webpack/standalone.babel.js

@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ */
+
+import configBuilder from "./_config-builder"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+  },
+  {
+    entry: {
+      "swagger-ui-standalone-preset": ["./src/standalone/index.js"],
+    },
+
+    output: {
+      library: "SwaggerUIStandalonePreset",
+    },
+  }
+)
+
+export default result

webpack/stylesheets.babel.js

@@ -0,0 +1,85 @@
+/**
+ * @prettier
+ */
+
+// NOTE: this config *does not* inherit from `_config-builder`.
+// It is also used in the dev config.
+
+import path from "path"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+import IgnoreAssetsPlugin from "ignore-assets-webpack-plugin"
+import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin"
+
+export default {
+  mode: "production",
+
+  entry: {
+    "swagger-ui": "./src/style/main.scss",
+  },
+
+  module: {
+    rules: [
+      {
+        test: [/\.(scss)(\?.*)?$/],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: "css-loader",
+            options: { sourceMap: true },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              sourceMap: true,
+              plugins: loader => [
+                require("cssnano")(),
+                require("autoprefixer")(),
+              ],
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              outputStyle: "expanded",
+              sourceMap: true,
+              sourceMapContents: "true",
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    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",
+
+  output: {
+    path: path.join(__dirname, "../", "dist"),
+    publicPath: "/dist",
+  },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true,
+        },
+      },
+    },
+  },
+}