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) => {
-        if (!isWebpackInit) {
-          isWebpackInit = true
-          require('./server')
+      global.WP = webpack(global.WPCONFIG)
+      require('./server')
 
-          const devWatcher = chokidar.watch('./server')
-          devWatcher.on('ready', () => {
-            devWatcher.on('all', () => {
-              console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
-              console.warn('--- Changes detected: Restarting ---')
-              console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
-              global.wiki.server.close(() => {
-                global.wiki = {}
-                for (const workerId in cluster.workers) {
-                  cluster.workers[workerId].kill()
-                }
-                Object.keys(require.cache).forEach(function(id) {
-                  if (/[/\\]server[/\\]/.test(id)) delete require.cache[id]
-                })
-                require('./server')
-              })
+      const devWatcher = chokidar.watch('./server')
+      devWatcher.on('ready', () => {
+        devWatcher.on('all', () => {
+          console.warn('--- >>>>>>>>>>>>>>>>>>>>>>>>>>>> ---')
+          console.warn('--- Changes detected: Restarting ---')
+          console.warn('--- <<<<<<<<<<<<<<<<<<<<<<<<<<<< ---')
+          global.wiki.server.destroy(() => {
+            global.wiki = {}
+            for (const workerId in cluster.workers) {
+              cluster.workers[workerId].kill()
+            }
+            Object.keys(require.cache).forEach(function(id) {
+              if (/[/\\]server[/\\]/.test(id)) delete require.cache[id]
             })
+            require('./server')
           })
-        }
+        })
       })
     } else {
       require('./server')

yarn.lock

@@ -6414,6 +6414,16 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
+log-symbols@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
+loglevelnext@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.3.tgz#0f69277e73bbbf2cd61b94d82313216bf87ac66e"
+
 long-timeout@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/long-timeout/-/long-timeout-0.1.1.tgz#9721d788b47e0bcb5a24c2e2bee1a0da55dab514"
@@ -6428,7 +6438,7 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^3.0.0"
 
-loud-rejection@^1.0.0:
+loud-rejection@^1.0.0, loud-rejection@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
   dependencies:
@@ -6730,6 +6740,10 @@ mime@^1.3.4:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
 
+mime@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.0.tgz#161e541965551d3b549fa1114391e3a3d55b923b"
+
 mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
@@ -8863,14 +8877,14 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+range-parser@^1.0.3, range-parser@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+
 range-parser@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.0.3.tgz#6872823535c692e2c2a0103826afd82c2e0ff175"
 
-range-parser@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
-
 raw-body@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
@@ -10637,6 +10651,10 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
+url-join@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+
 url-parse-lax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -10979,6 +10997,18 @@ webpack-bundle-analyzer@2.9.2:
     opener "^1.4.3"
     ws "^4.0.0"
 
+webpack-dev-middleware@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-2.0.4.tgz#7d8943a609121021bb72772a41636e229346cb41"
+  dependencies:
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    url-join "^2.0.2"
+    webpack-log "^1.0.1"
+
 webpack-hot-middleware@2.21.0:
   version "2.21.0"
   resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz#7b3c113a7a4b301c91e0749573c7aab28b414b52"
@@ -10988,6 +11018,15 @@ webpack-hot-middleware@2.21.0:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
+webpack-log@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.1.1.tgz#a0c7beb385245da7b2172afe46c02cf3a471ef31"
+  dependencies:
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
+
 webpack-merge@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"