refactor: Remove deprecated webpack-serve in favor of using webpack-d…

…ev-server

config/server.js

@@ -1,39 +1,40 @@
 const isNil = require('lodash/isNil');
-const convert = require('koa-connect');
-const history = require('connect-history-api-fallback');
-const proxy = require('http-proxy-middleware');
-const serve = require('webpack-serve');
+const express = require('express');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
 const webpackConfig = require('./webpack/config');
 const settingsConfig = require('./gulp/lib/get-settings-config');
 const projectPath = require('./gulp/lib/project-path');
 
-serve({}, {
-    add: (app, middleware, options) => {
-        const proxies = settingsConfig.webpack.development.proxies;
+const proxies = settingsConfig.webpack.development.proxies;
+const proxyConfig = {};
 
-        if (!isNil(proxies) && proxies.length) {
-            proxies.forEach(item => {
-                app.use(convert(proxy(item.path, {target: item.target})));
-            });
-        }
+if (!isNil(proxies) && proxies.length) {
+    proxies.forEach(item => {
+        proxyConfig[item.path] = item.target;
+    });
+}
 
-        if (settingsConfig.webpack.development.historyApiFallback) {
-            app.use(convert(history()));
-        }
+new WebpackDevServer(webpack(webpackConfig), {
+    publicPath: webpackConfig.output.publicPath,
+    hot: true,
+    historyApiFallback: settingsConfig.webpack.development.historyApiFallback,
+    proxy: proxyConfig,
+    stats: {
+        colors: true,
+        hash: false,
+        timings: true,
+        chunks: false,
+        chunkModules: false,
+        modules: false
     },
-    config: webpackConfig,
-    content: projectPath(settingsConfig.root.path),
-    devMiddleware: {
-        publicPath: webpackConfig.output.publicPath,
-        stats: {
-            chunks: false,
-            chunkModules: false,
-            colors: true,
-            hash: false,
-            modules: false
-        },
-        writeToDisk: true
-    },
-    hotClient: true,
-    port: settingsConfig.webpack.port
+    before: app => {
+        app.use(express.static(projectPath(settingsConfig.root.path)));
+    }
+}).listen(settingsConfig.webpack.port, settingsConfig.env.hostname, err => {
+    /* eslint-disable no-console */
+    if (err) { console.log(err); }
+
+    console.log(`BrowserSync will proxy ${settingsConfig.env.hostname}:${settingsConfig.webpack.port}. Bundling JS using Webpack...`);
+    /* eslint-enable no-console */
 });

config/settings.js

@@ -94,7 +94,7 @@ module.exports = {
     js: {
         path: 'js', // path to JS directory where JS files will be watched for transpilation during development
         input: 'main.js', // name of entry JS file (modify webpack.entry to pass multiple files)
-        output: 'bundle.js', // name of generated output JS file during development builds
-        min: 'bundle.min.js' // name of uglified generated output JS file during production builds
+        output: 'bundle.js', // name of generated output JS file during development builds, set to [name].js if multiple entries are passed
+        min: 'bundle.min.js' // name of uglified generated output JS file during production builds, set to [name].min.js if multiple entries are passed
     }
 };

config/webpack/config-common.js

@@ -7,20 +7,35 @@ const settingsConfig = require('../gulp/lib/get-settings-config');
 const projectPath = require('../gulp/lib/project-path');
 const babelOptions = require('../babel');
 
-const entry = (!isNil(settingsConfig.webpack.entry))
+const npmEvent = process.env.npm_lifecycle_event.split(':')[0];
+const entryPoints = (!isNil(settingsConfig.webpack.entry))
     ? isObject(settingsConfig.webpack.entry)
         ? mapValues(settingsConfig.webpack.entry, item => {
             return `${projectPath(settingsConfig.root.path)}/${settingsConfig.js.path}/${item}`;
         })
         : `${projectPath(settingsConfig.root.path)}/${settingsConfig.js.path}/${settingsConfig.webpack.entry}`
     : `${projectPath(settingsConfig.root.path)}/${settingsConfig.js.path}/${settingsConfig.js.input}`;
+const entryAddons = [
+    `webpack-dev-server/client?http://${settingsConfig.env.hostname}:${settingsConfig.webpack.port}`,
+    'webpack/hot/dev-server',
+];
 const settingsResolveModules = settingsConfig.webpack.resolveModules;
 const settingsModulueRules = settingsConfig.webpack.moduleRules || [];
+let entry = entryPoints;
 let modules = [
     'node_modules',
     path.resolve(`${projectPath(settingsConfig.root.path)}/${settingsConfig.js.path}`)
 ];
 
+if (npmEvent === 'start') {
+    // add hot reloading to entry points for local development
+    entry = (isObject(entryPoints))
+        ? mapValues(entryPoints, entryItem => {
+            return entryAddons.concat([entryItem]);
+        })
+        : entryAddons.concat([entry]);
+}
+
 if (settingsResolveModules && settingsResolveModules.length) {
     const extraModules = settingsResolveModules.map(modulePath => {
         return path.resolve(`${projectPath(settingsConfig.root.path)}/${modulePath}`);

config/webpack/config-dev.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const WriteFilePlugin = require('write-file-webpack-plugin');
 const settingsConfig = require('../gulp/lib/get-settings-config');
 const projectPath = require('../gulp/lib/project-path');
 
@@ -20,6 +21,10 @@ module.exports = {
                 ...settingsConfig.env.vars.development
             }
         }),
+        new webpack.HotModuleReplacementPlugin(),
+        new WriteFilePlugin({
+            log: false
+        }),
         new BrowserSyncPlugin(
             {
                 logPrefix: settingsConfig.browserSync.prefix,