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

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,
+        },
+      },
+    },
+  },
+}