impl HMR with webpack

config/webpack.dev.js

@@ -73,6 +73,10 @@ module.exports = function (options) {
           plugins: [],
         })
       }),
+
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoErrorsPlugin(),
+
     ]
   });
 }

lib/crowi/dev.js

@@ -0,0 +1,48 @@
+const debug = require('debug')('crowi:crowi:dev');
+const path = require('path');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const reload = require('reload');
+const chokidar = require('chokidar');
+
+class CrowiDev {
+
+  /**
+   * Creates an instance of CrowiDev.
+   * @param {Crowi} crowi
+   * @param {any} server http server
+   * @param {any} app express
+   *
+   * @memberOf CrowiDev
+   */
+  constructor(crowi, server, app) {
+    this.crowi = crowi;
+    this.server = server;
+    this.app = app;
+  }
+
+  setupLiveReloadTools() {
+    // Webpack HMR settings
+    const webpackConfig = require('../../webpack.config');
+    var compiler = webpack(webpackConfig);
+    this.app.use(webpackDevMiddleware(compiler, {
+      noInfo: true, publicPath: webpackConfig.output.publicPath
+    }));
+    this.app.use(webpackHotMiddleware(compiler));
+
+    // reload settings
+    // see: https://github.com/glenjamin/webpack-hot-middleware
+    // see: https://github.com/jprichardson/reload
+    const reloadServer = reload(this.server, this.app);
+    // fire reload() when views are modified
+    const watcher = chokidar.watch(path.join(this.crowi.libDir, 'views'));
+    watcher.on('all', (event, path) => {
+      reloadServer.reload();
+    });
+
+    // debug(`watching for live-reloading -> ${this.crowi.libDir}`);
+  }
+}
+
+module.exports = CrowiDev

lib/crowi/index.js

@@ -18,17 +18,17 @@ function Crowi (rootdir, env)
 
   this.version = pkg.version;
 
-  this.rootDir   = rootdir;
-  this.pluginDir = path.join(this.rootDir, 'node_modules') + sep;
-  this.publicDir = path.join(this.rootDir, 'public') + sep;
-  this.libDir    = path.join(this.rootDir, 'lib') + sep;
-  this.eventsDir = path.join(this.libDir, 'events') + sep;
-  this.localeDir = path.join(this.rootDir, 'locales') + sep;
+  this.rootDir     = rootdir;
+  this.pluginDir   = path.join(this.rootDir, 'node_modules') + sep;
+  this.publicDir   = path.join(this.rootDir, 'public') + sep;
+  this.libDir      = path.join(this.rootDir, 'lib') + sep;
+  this.eventsDir   = path.join(this.libDir, 'events') + sep;
+  this.localeDir   = path.join(this.rootDir, 'locales') + sep;
   this.resourceDir = path.join(this.rootDir, 'resource') + sep;
-  this.viewsDir  = path.join(this.libDir, 'views') + sep;
-  this.mailDir   = path.join(this.viewsDir, 'mail') + sep;
-  this.tmpDir    = path.join(this.rootDir, 'tmp') + sep;
-  this.cacheDir  = path.join(this.tmpDir, 'cache');
+  this.viewsDir    = path.join(this.libDir, 'views') + sep;
+  this.mailDir     = path.join(this.viewsDir, 'mail') + sep;
+  this.tmpDir      = path.join(this.rootDir, 'tmp') + sep;
+  this.cacheDir    = path.join(this.tmpDir, 'cache');
 
   this.config = {};
   this.searcher = null;
@@ -287,8 +287,6 @@ Crowi.prototype.getTokens = function() {
 Crowi.prototype.start = function() {
   var self = this
     , http = require('http')
-    , reload = require('reload')
-    , chokidar = require('chokidar')
     , server
     , io;
 
@@ -298,17 +296,11 @@ Crowi.prototype.start = function() {
         console.log(`[${self.node_env}] Express server listening on port ${self.port}`);
       });
 
-      // reload settings
-      // see: https://github.com/jprichardson/reload
+      // setup Live Reload Tools
       if (self.node_env === 'development') {
-        const reloadServer = reload(server, app);
-        // fire reload() when html is modified
-        const watcher = chokidar.watch(path.join(self.libDir, 'views'));
-        watcher.on('all', (event, path) => {
-          reloadServer.reload();
-        });
-
-        debug(`watching for live-reloading -> ${self.libDir}`);
+        const CrowiDev = require('./dev');
+        const crowiDev = new CrowiDev(self, server, app);
+        crowiDev.setupLiveReloadTools();
       }
 
       io = require('socket.io')(server);

package.json

@@ -113,9 +113,10 @@
     "sinon-chai": "~2.7.0",
     "style-loader": "^0.13.2",
     "webpack": "2.2.0",
-    "webpack-dev-middleware": "^1.10.0",
+    "webpack-dev-middleware": "^1.10.1",
     "webpack-dev-server": "2.4.1",
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
+    "webpack-hot-middleware": "^2.17.1",
     "webpack-merge": "~3.0.0"
   },
   "license": "MIT",
@@ -128,7 +129,7 @@
     "clean": "npm cache clean && npm run rimraf -- dist dll",
     "nodemon": "nodemon",
     "rimraf": "rimraf",
-    "server:dev": "nodemon --watch lib --watch public/js app.js",
+    "server:dev": "nodemon --watch lib app.js",
     "server": "npm run server:dev",
     "start:dev": "npm run server",
     "start": "npm run server:prod",

resource/js/dev.js

@@ -2,3 +2,4 @@
  * dev tools
  */
 import 'reload/lib/reload-client';
+import 'webpack-hot-middleware/client';