Merge pull request #187 from chanzuckerberg/webpack4-replay

Webpack4 port

client/configuration/babel/babel.prod.js

@@ -3,8 +3,7 @@ module.exports = {
   presets: [["env", { loose: true, modules: false }], "stage-0", "react"],
   plugins: [
     "babel-plugin-transform-react-constant-elements",
-    "babel-plugin-transform-decorators-legacy"
+    "babel-plugin-transform-decorators-legacy",
+    "babel-plugin-transform-runtime"
   ]
-    .map(require.resolve)
-    .concat([[require.resolve("babel-plugin-transform-runtime")]])
 };

client/configuration/polyfills/polyfills.js

@@ -1,6 +0,0 @@
-if (typeof Promise === "undefined") {
-  require("promise/lib/rejection-tracking").enable();
-  window.Promise = require("promise/lib/es6-extensions.js");
-}
-
-require("whatwg-fetch");

client/configuration/webpack/webpack.config.dev.js

@@ -8,12 +8,12 @@ const src = path.resolve("src");
 const nodeModules = path.resolve("node_modules");
 
 module.exports = {
+  mode: "development",
   devtool: "eval",
   entry: [
     "webpack-hot-middleware/client?quiet=true&noInfo=true",
     require.resolve("react-hot-loader/patch"),
-    require.resolve("../polyfills/polyfills"),
+    "./src/index"
-    path.join(src, "index")
   ],
   output: {
     path: path.resolve("build"),
@@ -21,20 +21,38 @@ module.exports = {
     filename: "static/js/bundle.js",
     publicPath: "/"
   },
-  resolve: { extensions: [".js", ".json"] },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         include: src,
         loader: "babel-loader",
-        query: require("../babel/babel.dev")
+        options: require("../babel/babel.dev")
       },
       {
         test: /\.css$/,
         include: [src, nodeModules],
-        loader:
+        loader: [
-          "style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+              importLoaders: 1,
+              localIdentName: "[name]__[local]___[hash:base64:5]"
+            }
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: function() {
+                return [];
+              }
+            }
+          }
+        ]
       },
       { test: /\.json$/, include: [src, nodeModules], loader: "json-loader" },
       {
@@ -57,18 +75,6 @@ module.exports = {
       template: path.resolve("index.html"),
       favicon: path.resolve("favicon.png")
     }),
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        eslint: {
-          configFile: path.resolve("./configuration/eslint/eslint.js"),
-          useEslintrc: false
-        },
-        postcss() {
-          return [autoprefixer];
-        }
-      }
-    }),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": '"development"' }),
     // Note: only CSS is currently hot reloaded
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()

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

@@ -3,11 +3,9 @@ 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");
-const MinifyPlugin = require("babel-minify-webpack-plugin");
 
 const src = path.resolve("src");
 const nodeModules = path.resolve("node_modules");
@@ -15,32 +13,48 @@ const nodeModules = path.resolve("node_modules");
 const publicPath = "/";
 
 module.exports = {
+  mode: "production",
   bail: true,
+  cache: false,
   devtool: "cheap-source-map",
-  entry: [require.resolve("../polyfills/polyfills"), path.join(src, "index")],
+  entry: ["./src/index"],
   output: {
     path: path.resolve("build"),
     filename: "static/js/[name].[chunkhash:8].js",
-    chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
     publicPath
   },
-  resolve: { extensions: [".js", ".json"] },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         include: src,
         loader: "babel-loader",
-        query: require("../babel/babel.prod")
+        options: require("../babel/babel.prod")
       },
       {
         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$/,
@@ -83,21 +97,9 @@ module.exports = {
       }
     }),
     new HtmlWebpackInlineSourcePlugin(),
-    new webpack.LoaderOptionsPlugin({
+    new MiniCssExtractPlugin({
-      options: {
+      filename: "static/css/[name].[contenthash:8].css"
-        eslint: {
-          configFile: path.resolve("./configuration/eslint/eslint.js"),
-          useEslintrc: false
-        },
-        postcss() {
-          return [autoprefixer];
-        }
-      }
     }),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": '"production"' }),
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new MinifyPlugin(),
-    new ExtractTextPlugin("static/css/[name].[contenthash:8].css"),
     new SWPrecacheWebpackPlugin({
       cacheId: "cellxgene",
       filename: "service-worker.js"

client/package.json

@@ -10,7 +10,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,
@@ -30,17 +29,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",
@@ -52,22 +49,18 @@
     "redux-thunk": "^2.2.0",
     "regl": "^1.3.1",
     "scroll-speed": "^1.0.0",
-    "serve-favicon": "^2.3.0",
+    "urijs": "^1.19.0"
-    "urijs": "^1.19.0",
-    "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
+    "autoprefixer": "^9.1.1",
     "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": "^4.1.6",
-    "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.11.6",
@@ -75,38 +68,32 @@
     "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-loader": "^0.26.1",
+    "eslint": "^5.3.0",
-    "css-modules-require-hook": "^4.0.1",
+    "eslint-config-airbnb": "^17.0.0",
-    "enzyme": "^3.3.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.14.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",
+    "jest": "^23.5.0",
-    "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": "^2.2.0-rc.4",
+    "webpack-cli": "^3.1.0",
-    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.3"
   },
   "jest": {

client/server/development.js

@@ -32,7 +32,7 @@ app.use(historyApiFallback({ verbose: false }));
 
 app.use(
   require("webpack-dev-middleware")(compiler, {
-    noInfo: true,
+    logLevel: 'warn',
     publicPath: config.output.publicPath
   })
 );

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();
-});