build(webpack): update to webpack-serve

`webpack-dev-server` is not compatible with `webpack-command`. It is
also slow, old and in maintenance-only mode.

Update to `webpack-serve` which is a more modern and faster alternative.

See:
 - https://github.com/webpack/webpack-dev-server#project-in-maintenance
 - http://shellscape.org/2018/02/12/webpack-serve-up-whoopass

package.json

@@ -29,7 +29,7 @@
     "prestart": "npm run build",
     "start": "cross-env NODE_ENV=production electron ./app/",
     "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./app/main.dev",
-    "start-renderer-dev": "node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",
+    "start-renderer-dev": "node --trace-warnings -r babel-register ./node_modules/.bin/webpack-serve --config webpack.config.renderer.dev.js",
     "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js",
     "test-ci": "npm run package && npm run test && npm run test-e2e",
     "test-all": "npm run lint && npm run lint-styles && npm run flow && npm run build && npm run test && npm run test-e2e",
@@ -166,6 +166,7 @@
     "browserslist": "^4.0.0",
     "chalk": "^2.4.1",
     "concurrently": "^3.6.0",
+    "connect-history-api-fallback": "^1.5.0",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "csp-html-webpack-plugin": "^2.3.0",
@@ -196,10 +197,12 @@
     "flow-runtime": "^0.17.0",
     "flow-typed": "^2.1.2",
     "html-webpack-plugin": "^3.2.0",
+    "http-proxy-middleware": "^0.18.0",
     "husky": "^1.0.0-rc.9",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.1.0",
     "jsdom": "^11.0.0",
+    "koa-connect": "^2.0.1",
     "lint-staged": "^7.2.0",
     "minimist": "^1.2.0",
     "node-sass": "^4.9.0",
@@ -219,8 +222,8 @@
     "webpack": "^4.12.0",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-command": "^0.4.1",
-    "webpack-dev-server": "^3.1.4",
-    "webpack-merge": "^4.1.3"
+    "webpack-merge": "^4.1.3",
+    "webpack-serve": "^2.0.2"
   },
   "dependencies": {
     "axios": "^0.16.2",

webpack.config.renderer.dev.js

@@ -11,6 +11,9 @@ import path from 'path'
 import fs from 'fs'
 import webpack from 'webpack'
 import merge from 'webpack-merge'
+import convert from 'koa-connect'
+import history from 'connect-history-api-fallback'
+import proxy from 'http-proxy-middleware'
 import { spawn, execSync } from 'child_process'
 import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
@@ -43,7 +46,6 @@ export default merge.smart(baseConfig, {
 
   entry: [
     'react-hot-loader/patch',
-    `webpack-dev-server/client?http://localhost:${port}/`,
     'webpack/hot/only-dev-server',
     path.join(__dirname, 'app/index.js')
   ],
@@ -206,14 +208,6 @@ export default merge.smart(baseConfig, {
       sourceType: 'var'
     }),
 
-    /**
-     * https://webpack.js.org/concepts/hot-module-replacement/
-     */
-    new webpack.HotModuleReplacementPlugin({
-      // @TODO: Waiting on https://github.com/jantimon/html-webpack-plugin/issues/533
-      // multiStep: true
-    }),
-
     new webpack.LoaderOptionsPlugin({
       debug: true
     }),
@@ -267,58 +261,90 @@ export default merge.smart(baseConfig, {
     __filename: false
   },
 
-  devServer: {
+  serve: {
     port,
-    publicPath,
-    compress: true,
-    noInfo: true,
-    stats: 'errors-only',
-    inline: true,
-    lazy: false,
-    hot: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    contentBase: path.join(__dirname, 'dist'),
-    watchOptions: {
-      aggregateTimeout: 300,
-      ignored: /node_modules/,
-      poll: 100
+    content: path.join(__dirname, 'dist'),
+    hotClient: {
+      validTargets: ['electron-renderer']
     },
-    proxy: {
-      '/proxy/zap.jackmallers.com': {
-        target: 'https://zap.jackmallers.com',
-        pathRewrite: { '^/proxy/zap.jackmallers.com': '' },
-        changeOrigin: true
-      },
-      '/proxy/api.coinmarketcap.com': {
-        target: 'https://api.coinmarketcap.com',
-        pathRewrite: { '^/proxy/api.coinmarketcap.com': '' },
-        changeOrigin: true
-      },
-      '/proxy/testnet-api.smartbit.com.au': {
-        target: 'https://testnet-api.smartbit.com.au',
-        pathRewrite: { '^/proxy/testnet-api.smartbit.com.au': '' },
-        changeOrigin: true
-      },
-      '/proxy/tchain.api.btc.com': {
-        target: 'https://tchain.api.btc.com',
-        pathRewrite: { '^/proxy/tchain.api.btc.com': '' },
-        changeOrigin: true
-      },
-      '/proxy/api.blockcypher.com': {
-        target: 'https://api.blockcypher.com',
-        pathRewrite: { '^/proxy/api.blockcypher.com': '' },
-        changeOrigin: true
+    devMiddleware: {
+      publicPath,
+      stats: 'errors-only',
+      headers: { 'Access-Control-Allow-Origin': '*' },
+      watchOptions: {
+        aggregateTimeout: 300,
+        ignored: /node_modules/,
+        poll: 100
       }
     },
-    historyApiFallback: {
-      verbose: true,
-      disableDotRule: false
+    // Add middleware to proxy requests to selected remote sites.
+    add: app => {
+      app.use(
+        convert(
+          proxy('/proxy/zap.jackmallers.com', {
+            target: 'https://zap.jackmallers.com',
+            pathRewrite: { '^/proxy/zap.jackmallers.com': '' },
+            changeOrigin: true
+          })
+        )
+      )
+      app.use(
+        convert(
+          proxy('/proxy/api.coinmarketcap.com', {
+            target: 'https://api.coinmarketcap.com',
+            pathRewrite: { '^/proxy/api.coinmarketcap.com': '' },
+            changeOrigin: true
+          })
+        )
+      )
+      app.use(
+        convert(
+          proxy('/proxy/testnet-api.smartbit.com.au', {
+            target: 'https://testnet-api.smartbit.com.au',
+            pathRewrite: { '^/proxy/testnet-api.smartbit.com.au': '' },
+            changeOrigin: true
+          })
+        )
+      )
+      app.use(
+        convert(
+          proxy('/proxy/tchain.api.btc.com', {
+            target: 'https://tchain.api.btc.com',
+            pathRewrite: { '^/proxy/tchain.api.btc.com': '' },
+            changeOrigin: true
+          })
+        )
+      )
+      app.use(
+        convert(
+          proxy('/proxy/api.blockcypher.com', {
+            target: 'https://api.blockcypher.com',
+            pathRewrite: { '^/proxy/api.blockcypher.com': '' },
+            changeOrigin: true
+          })
+        )
+      )
+      app.use(
+        convert(
+          history({
+            verbose: true,
+            disableDotRule: false
+          })
+        )
+      )
     },
-    before() {
-      if (process.env.START_HOT) {
-        spawn('npm', ['run', 'start-main-dev'], { shell: true, env: process.env, stdio: 'inherit' })
-          .on('close', code => process.exit(code))
-          .on('error', spawnError => mainLog.error(spawnError))
+    // Start the main process as soon as the server is listening.
+    on: {
+      listening: () => {
+        if (process.env.START_HOT) {
+          spawn('npm', ['run', 'start-main-dev'], {
+            shell: true,
+            env: process.env,
+            stdio: 'inherit'
+          })
+            .on('close', code => process.exit(code))
+            .on('error', spawnError => mainLog.error(spawnError))
+        }
       }
     }
   },