chore(webpack): Upgrade webpack config

Webpack-dev-middleware does not support concurrent webpack builds.

Author: floryst

Utilities/ExampleRunner/template-config.js

@@ -53,15 +53,17 @@ module.exports = {
   },
 
   devServer: {
-    contentBase: '${root.replace(/\\/g, '\\\\')}',
+    static: {
+      directory: '${root.replace(/\\/g, '\\\\')}',
+    },
     port: ${settings.devServerConfig.port()},
     host: '${settings.devServerConfig.host()}',
-    disableHostCheck: true,
+    allowedHosts: 'all',
     hot: false,
-    quiet: false,
-    noInfo: false,
-    stats: {
-      colors: true,
+    devMiddleware: {
+      stats: {
+        colors: true,
+      },
     },
     proxy: {
       '/data/**': {

webpack.dev.js

@@ -10,15 +10,19 @@ const settings = require('./webpack.settings.js');
 // Configure the webpack-dev-server
 function configureDevServer(port) {
   return {
-    contentBase: path.resolve(__dirname, settings.paths.dist.base),
-    public: settings.devServerConfig.public(),
+    static: {
+      directory: path.resolve(__dirname, settings.paths.dist.base),
+    },
+    client: {
+      overlay: true,
+      webSocketURL: settings.devServerConfig.ws,
+    },
     host: settings.devServerConfig.host(),
     port: port,
-    quiet: true,
-    hot: true,
-    hotOnly: true,
-    overlay: true,
-    stats: 'errors-only',
+    hot: 'only',
+    devMiddleware: {
+      stats: 'errors-only',
+    },
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
@@ -28,21 +32,8 @@ function configureDevServer(port) {
 const port = settings.devServerConfig.port();
 
 // Development module exports
-module.exports = [
-  merge(common.baseConfig, {
-    mode: 'development',
-    devtool: 'inline-source-map',
-    devServer: configureDevServer(port),
-    plugins: [
-      new webpack.HotModuleReplacementPlugin(),
-    ],
-  }),
-  merge(common.liteConfig, {
-    mode: 'development',
-    devtool: 'inline-source-map',
-    devServer: configureDevServer(port + 1),
-    plugins: [
-      new webpack.HotModuleReplacementPlugin(),
-    ],
-  }),
-];
+module.exports = merge(common.baseConfig, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: configureDevServer(port),
+});

webpack.settings.js

@@ -20,9 +20,13 @@ module.exports = {
     vtk: 'index.js',
   },
   devServerConfig: {
-    public: () => process.env.DEVSERVER_PUBLIC || 'http://localhost:8080',
     host: () => process.env.DEVSERVER_HOST || '0.0.0.0',
     port: () => process.env.DEVSERVER_PORT || 9999,
+    ws: {
+      hostname: 'localhost',
+      pathname: '/ws',
+      port: 8080,
+    },
   },
   options: {
     openAnalyzer: () => process.env.BUNDLE_ANALYZER || false,