Webpack Hot Middleware

Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server.

Installation & Usage

See example/ for an example of usage.

First, install the npm module.

npm install --save-dev webpack-hot-middleware

Next, enable hot reloading in your webpack config:

1. Add the following three plugins to the plugins array:

   plugins: [
       new webpack.optimize.OccurenceOrderPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoErrorsPlugin()
   ]

   Occurence ensures consistent build hashes, hot module replacement is somewhat self-explanatory, no errors is used to handle errors more cleanly.

2. Add 'webpack/hot/dev-server' into the entry array. This allows webpack to detect and reload updated modules when notified.

3. Add 'webpack-hot-middleware/client' into the entry array. This connects to the server to receive notifications when the bundle rebuilds.

Now add the middleware into your server:

1. Add webpack-dev-middleware the usual way

   var webpack = require('webpack');
   var webpackConfig = require('./webpack.config');
   var compiler = webpack(webpackConfig);
   
   app.use(require("webpack-dev-middleware")(compiler, {
       noInfo: true, publicPath: webpackConfig.output.publicPath
   }));

2. Add webpack-hot-middleware attached to the same compiler instance

   app.use(require("webpack-hot-middleware")(compiler));

And you're all set!

Documentation

More to come soon, you'll have to mostly rely on the example for now.

Config

Configuration options can be passed to the client by adding querystring parameters to the path in the webpack config.

'webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false'

• path - The path which the middleware is serving the event stream on
• timeout - The time to wait after a disconnection before attempting to reconnect
• overlay - Set to false to disable the DOM-based client-side overlay.

License

Copyright 2015 Glen Mailer.

MIT Licened.