fix: measurementsAPI issue caused by production build (#842)

* ci: test docs-publish * Specify to use prod * Babel should transpile with env set by webpack * in-progress * in-progress * Polyfill for ie11 and edge features * Ditch polyfills w/ babel - we'll use a service for now * Bump tools version; shift vtk.js up a layer * Specify we shouldn't target older than IE 11 * ditch babel plugins that should be covered by preset-env * Add a top level build demo command * Let our babel config determine settings * Same babel fixes as PWA * Rebuild deps that don't satisfy our target * Mini helper script for excluding all node_modules, except... * Shift vtk.js dep up a layer * Kill core-js * Export in a node happy way * Updated yarn lock * Set NODE_ENV when launching anything w/ WebPack * docs: updated FAQ * docs: on browser support * Add support for redux browser extension * misc. small clean-up * docs: Remove roadmap page; add browser-support to sidebar * Formatting * Remove roadmap links * Formatting * ci: Remove config syntax error * Simplified bug report template * update community request template * Update question's template * simplify build scripts * specify new script names * fix: for measurement api being pruned by minimizer in prod builds * Use named exports * Simplify config * Let's not do so much heavy lifting for a dev-server build * fix dev build * Add hotkeys to demo * fix: jest babel config and env specific configs * Remove call to non-existant command * Shift experimental proposal plugin up a layer * Use `https` * Try with reduced number of package exceptions * Try to resolve cypress issue * Try to fix cypress issue in CI * Skip https
2019-09-04 13:53:13 -04:00
1 parent 25e7232660
commit 49d343941e
@@ -0,0 +1,132 @@
+// ~~ WebPack
+const path = require('path');
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const webpackBase = require('./../../../.webpack/webpack.base.js');
+// ~~ Plugins
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+// ~~ Rules
+const extractStyleChunksRule = require('./rules/extractStyleChunks.js');
+// ~~ Directories
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+// ~~ Env Vars
+const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
+const PUBLIC_URL = process.env.PUBLIC_URL || '/';
+const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
+
+module.exports = (env, argv) => {
+  const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
+  const isProdBuild = process.env.NODE_ENV === 'production';
+
+  const mergedConfig = merge(baseConfig, {
+    devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
+    output: {
+      path: DIST_DIR,
+      filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
+      publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
+    },
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: isProdBuild,
+      sideEffects: true,
+      //   // TODO: For more granular minimize
+      //   // minimizer: [
+      //   //   new TerserJSPlugin({
+      //   //     sourceMap: true,
+      //   //     terserOptions: {
+      //   //       sourceMap: {
+      //   //         file: '[name].map',
+      //   //         url: 'https://my-host/[url]',
+      //   //       },
+      //   //     },
+      //   //   }),
+      //   //   new OptimizeCSSAssetsPlugin({}),
+      //   // ],
+    },
+    module: {
+      rules: [...extractStyleChunksRule(isProdBuild)],
+    },
+    plugins: [
+      // Uncomment to generate bundle analyzer
+      // new BundleAnalyzerPlugin(),
+      // Clean output.path
+      new CleanWebpackPlugin(),
+      // Copy "Public" Folder to Dist
+      new CopyWebpackPlugin([
+        {
+          from: PUBLIC_DIR,
+          to: DIST_DIR,
+          toType: 'dir',
+          // Ignore our HtmlWebpackPlugin template file
+          // Ignore our configuration files
+          ignore: ['config/*', 'html-templates/*', '.DS_Store'],
+        },
+        // Copy over and rename our target app config file
+        {
+          from: `${PUBLIC_DIR}/${APP_CONFIG}`,
+          to: `${DIST_DIR}/app-config.js`,
+        },
+      ]),
+      // https://github.com/faceyspacey/extract-css-chunks-webpack-plugin#webpack-4-standalone-installation
+      new ExtractCssChunksPlugin({
+        filename: '[name].css',
+        chunkFilename: '[id].css',
+        ignoreOrder: false, // Enable to remove warnings about conflicting order
+      }),
+      // Generate "index.html" w/ correct includes/imports
+      new HtmlWebpackPlugin({
+        template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
+        filename: 'index.html',
+        templateParameters: {
+          PUBLIC_URL: PUBLIC_URL,
+        },
+        // favicon: `${PUBLIC_DIR}/favicon.ico`,
+      }),
+      new WorkboxPlugin.GenerateSW({
+        swDest: 'sw.js',
+        clientsClaim: true,
+        skipWaiting: true,
+      }),
+    ],
+    // https://webpack.js.org/configuration/dev-server/
+    devServer: {
+      // gzip compression of everything served
+      // Causes Cypress: `wait-on` issue in CI
+      // compress: true,
+      // http2: true,
+      // https: true,
+      hot: true,
+      open: true,
+      port: 3000,
+      historyApiFallback: {
+        disableDotRule: true,
+      },
+    },
+  });
+
+  if (!isProdBuild) {
+    mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+  }
+
+  return mergedConfig;
+};