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

@@ -106,6 +106,20 @@ module.exports = async () => {
   app.locals.moment.locale(wiki.config.site.lang)
   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,37 +68,31 @@ 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) => {
+      global.WP = webpack(global.WPCONFIG)
-        if (!isWebpackInit) {
+      require('./server')
-          isWebpackInit = true
-          require('./server')
 
-          const devWatcher = chokidar.watch('./server')
+      const devWatcher = chokidar.watch('./server')
-          devWatcher.on('ready', () => {
+      devWatcher.on('ready', () => {
-            devWatcher.on('all', () => {
+        devWatcher.on('all', () => {
-              console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
+          console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
-              console.warn('--- Changes detected: Restarting ---')
+          console.warn('--- Changes detected: Restarting ---')
-              console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
+          console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
-              global.wiki.server.close(() => {
+          global.wiki.server.destroy(() => {
-                global.wiki = {}
+            global.wiki = {}
-                for (const workerId in cluster.workers) {
+            for (const workerId in cluster.workers) {
-                  cluster.workers[workerId].kill()
+              cluster.workers[workerId].kill()
-                }
+            }
-                Object.keys(require.cache).forEach(function(id) {
+            Object.keys(require.cache).forEach(function(id) {
-                  if (/[/\\]server[/\\]/.test(id)) delete require.cache[id]
+              if (/[/\\]server[/\\]/.test(id)) delete require.cache[id]
-                })
-                require('./server')
-              })
             })
+            require('./server')
           })
-        }
+        })
       })
     } else {
       require('./server')