webpack-middleware-hmr

HMR with webpack-dev-middleware

Server side

• add 'webpack/hot/only-dev-server' to your webpack config entry points
• add HotModuleReplacementPlugin() to your webpack config
• run your node.js app with the webpack-dev-middleware
• run webpack-middleware-hmr using the same compiler, and the instance of your server

Example :

var express = require('express');
var http = require('http');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-middleware-hmr/server.js');
var config = require('./webpack.config.js'); //your webpack config file

config.entry.app.unshift(
  'webpack/hot/only-dev-server'
);
config.plugins.unshift(
  new webpack.HotModuleReplacementPlugin()
);

var app = express();
var server = http.createServer(app);
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {}));
server.listen(port)
webpackHotMiddleware(server, compiler);

---

Client side

Add this snippet to your client js app:

if (module.hot) {
  require('webpack-middleware-hmr/client.js')();
}