continued webpack4 port: update to recent build packages, remove unused packages, production webpack port

client/configuration/webpack/webpack.config.prod.js

@@ -3,7 +3,7 @@ const path = require("path");
 const autoprefixer = require("autoprefixer");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
@@ -17,7 +17,8 @@ const publicPath = "/";
 module.exports = {
   mode: "production",
   bail: true,
-  devtool: "cheap-source-map",
+  // TODO: causes a js error, need to update to whatever webpack4 wants
+  // devtool: "cheap-source-map",
   entry: [require.resolve("../polyfills/polyfills"), path.join(src, "index")],
   output: {
     path: path.resolve("build"),
@@ -37,11 +38,27 @@ module.exports = {
       {
         test: /\.css$/,
         include: [src, nodeModules],
-        loader: ExtractTextPlugin.extract({
+        loader: [
-          fallbackLoader: "style-loader",
+          {
-          loader:
+            loader: MiniCssExtractPlugin.loader
-            "css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss-loader"
+          },
-        })
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+              importLoaders: 1,
+              localIdentName: "[name]__[local]___[hash:base64:5]"
+            }
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: function() {
+                return [];
+              }
+            }
+          }
+        ]
       },
       {
         test: /\.json$/,
@@ -98,7 +115,9 @@ module.exports = {
     new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new MinifyPlugin(),
-    new ExtractTextPlugin("static/css/[name].[contenthash:8].css"),
+    new MiniCssExtractPlugin({
+      filename: "static/css/[name].[contenthash:8].css"
+    }),
     new SWPrecacheWebpackPlugin({
       cacheId: "cellxgene",
       filename: "service-worker.js"

client/package.json

@@ -13,7 +13,6 @@
     "clean": "rimraf build",
     "start": "node server/development.js",
     "lint": "eslint src",
-    "prod": "cross-env NODE_ENV=production PORT=3000 node server/production.js",
     "test": "jest"
   },
   "engineStrict": true,
@@ -33,17 +32,15 @@
   "dependencies": {
     "canvas-fit": "^1.5.0",
     "d3": "^4.10.0",
-    "express": "^4.14.0",
     "font-color-contrast": "^1.0.3",
     "gl-mat4": "^1.1.4",
     "gl-matrix": "^2.7.1",
-    "hsv2rgb": "^1.1.0",
     "key-pressed": "0.0.1",
     "lodash": "^4.17.4",
     "mouse-position": "^2.0.1",
     "mouse-pressed": "^1.0.0",
     "orbit-camera": "^1.0.0",
-    "query-string": "^5.0.0",
+    "query-string": "^6.1.0",
     "react": "^16.4.2",
     "react-autocomplete": "^1.7.2",
     "react-dom": "^16.4.1",
@@ -55,15 +52,13 @@
     "redux-thunk": "^2.2.0",
     "regl": "^1.3.1",
     "scroll-speed": "^1.0.0",
-    "serve-favicon": "^2.3.0",
     "urijs": "^1.19.0",
-    "webpack": "^4.16.0",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
+    "autoprefixer": "^9.1.0",
     "babel-core": "^6.13.2",
-    "babel-eslint": "^7.1.1",
+    "babel-eslint": "^8.2.6",
     "babel-loader": "^7.1.2",
     "babel-minify-webpack-plugin": "^0.3.1",
     "babel-plugin-istanbul": "^3.1.2",
@@ -76,40 +71,33 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.11.6",
     "babel-runtime": "^6.11.6",
-    "buffer-shims": "^1.0.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^3.1.4",
     "css-loader": "^1.0.0",
-    "css-modules-require-hook": "^4.0.1",
+    "eslint": "^5.3.0",
-    "enzyme": "^3.3.0",
+    "eslint-config-airbnb": "^17.0.0",
-    "eslint": "^4.18.2",
     "eslint-loader": "^1.5.0",
-    "eslint-plugin-filenames": "^1.1.0",
+    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^6.0.0",
+    "eslint-plugin-react": "^7.10.0",
-    "extract-text-webpack-plugin": "^2.0.0-beta.3",
+    "express": "^4.14.0",
-    "file-loader": "^0.9.0",
+    "file-loader": "^1.1.11",
-    "filesize": "^3.3.0",
-    "gzip-size": "^3.0.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.4.1",
-    "jsdom": "^9.4.1",
     "json-loader": "^0.5.4",
+    "mini-css-extract-plugin": "^0.4.1",
     "nyc": "^13.0.1",
-    "postcss": "^6.0.0",
+    "postcss-loader": "^2.1.6",
-    "postcss-loader": "^1.2.2",
     "promise": "^7.1.1",
-    "react-addons-test-utils": "^15.3.0",
     "redbox-react": "^1.3.0",
     "rimraf": "^2.5.4",
-    "style-loader": "^0.13.1",
+    "serve-favicon": "^2.3.0",
+    "style-loader": "^0.22.1",
     "sw-precache-webpack-plugin": "^0.7.1",
-    "url-loader": "^0.6.0",
+    "url-loader": "^1.0.1",
-    "web-app-manifest-loader": "^0.1.1",
     "webpack": "^4.16.0",
     "webpack-cli": "^3.1.0",
     "webpack-dev-middleware": "^1.6.1",

client/server/production.js

@@ -1,32 +0,0 @@
-/* eslint-disable */
-// jshint esversion: 6
-var path = require("path");
-var fs = require("fs");
-var chalk = require("chalk");
-var express = require("express");
-var favicon = require("serve-favicon");
-var utils = require("./utils");
-
-var PORT = process.env.PORT || 80;
-
-// Launch server
-var app = express();
-
-app.use(express.static("./build"));
-
-app.use(favicon("./build/favicon.png"));
-
-app.get("*", (req, res) => {
-  res.sendFile(path.resolve("./build/index.html"));
-});
-
-app.listen(PORT, err => {
-  if (err) {
-    console.log(err);
-    return;
-  }
-
-  utils.clearConsole();
-  console.log(chalk.cyan("Production server started on port " + PORT));
-  console.log();
-});