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
2019-07-11 18:57:44 -05:00
parent 9935ea3328
commit 88204daad8
23 changed files with 5176 additions and 5520 deletions
--- a/webpack/stylesheets.babel.js
+++ b/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,
+        },
+      },
+    },
+  },
+}