refactor: handle HMR

dev/webpack/webpack.common.js

@@ -83,7 +83,7 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          extractCSS: true,
+          extractCSS: ExtractTextPlugin,
           postcss: postCSSConfig,
           loaders: {
             css: [

package.json

@@ -203,6 +203,7 @@
     "vuex-persistedstate": "2.4.2",
     "webpack": "3.10.0",
     "webpack-bundle-analyzer": "2.9.2",
+    "webpack-dev-middleware": "2.0.4",
     "webpack-hot-middleware": "2.21.0",
     "webpack-merge": "4.1.1",
     "whatwg-fetch": "2.0.3"

server/master.js

@@ -107,6 +107,20 @@ module.exports = async () => {
   app.locals.config = wiki.config
 
   // ----------------------------------------
+  // HMR (Dev Mode Only)
+  // ----------------------------------------
+
+  if (global.DEV) {
+    const webpackDevMiddleware = require('webpack-dev-middleware')
+    const webpackHotMiddleware = require('webpack-hot-middleware')
+    app.use(webpackDevMiddleware(global.WP, {
+      publicPath: global.WPCONFIG.output.publicPath,
+      logger: wiki.logger
+    }))
+    app.use(webpackHotMiddleware(global.WP))
+  }
+
+  // ----------------------------------------
   // Controllers
   // ----------------------------------------
 
@@ -149,6 +163,8 @@ module.exports = async () => {
   // Start HTTP server
   // ----------------------------------------
 
+  let srvConnections = {}
+
   wiki.logger.info(`HTTP Server on port: [ ${wiki.config.port} ]`)
 
   app.set('port', wiki.config.port)
@@ -173,9 +189,24 @@ module.exports = async () => {
     }
   })
 
+  wiki.server.on('connection', conn => {
+    let key = `${conn.remoteAddress}:${conn.remotePort}`
+    srvConnections[key] = conn
+    conn.on('close', function() {
+      delete srvConnections[key]
+    })
+  })
+
   wiki.server.on('listening', () => {
     wiki.logger.info('HTTP Server: [ RUNNING ]')
   })
 
+  wiki.server.destroy = (cb) => {
+    wiki.server.close(cb)
+    for (let key in srvConnections) {
+      srvConnections[key].destroy()
+    }
+  }
+
   return true
 }

wiki.js

@@ -68,16 +68,12 @@ const init = {
   },
   dev() {
     if (cluster.isMaster) {
-      const webpackConfig = require('./dev/webpack/webpack.dev.js')
       const webpack = require('webpack')
       const chokidar = require('chokidar')
 
-      let isWebpackInit = false
-
+      global.WPCONFIG = require('./dev/webpack/webpack.dev.js')
       global.DEV = true
-      global.WP = webpack(webpackConfig, (err, stats) => {
-        if (!isWebpackInit) {
-          isWebpackInit = true
+      global.WP = webpack(global.WPCONFIG)
       require('./server')
 
       const devWatcher = chokidar.watch('./server')
@@ -86,7 +82,7 @@ const init = {
           console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
           console.warn('--- Changes detected: Restarting ---')
           console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
-              global.wiki.server.close(() => {
+          global.wiki.server.destroy(() => {
             global.wiki = {}
             for (const workerId in cluster.workers) {
               cluster.workers[workerId].kill()
@@ -98,8 +94,6 @@ const init = {
           })
         })
       })
-        }
-      })
     } else {
       require('./server')
     }