Hot loading is one of the best advantages of webpack, it avoids the need of recompiling after each small change. webpack-hot-middleware integrates well with express and is perfect for developing with ReactJS.


Assuming you already have webpack and a webpack.config.js file set up, the only dependencies needed are webpack-dev-middleware and webpack-hot-middleware. Install them with the following commands

npm install webpack-dev-middleware
npm install webpack-hot-middleware
Changing the webpack.config.js file

There are two simple changes to make in the webpack config file

First, add webpack-hot-middleware/client before the file you are compiling in the entry field of the config file. So entry should look like this:

entry: [

Second, we need to add a plugin for hot loading, so in the plugins field add the following line

new webpack.HotModuleReplacementPlugin()

The author of webpack-hot-middleware has an awesome example of the config here to check out

Changing the index.js file (or wherever express is)

To add the middleware to express, we first need to load some dependencies. Add the following lines at the top of your index.js file

var webpack = require('webpack');
var config = require('./webpack.config');
var compiler = webpack(config);

Now for the important part, adding in the actual middleware. Express will use webpack-dev-middleware and webpack-hot-middleware to serve the hot loaded files on the same port which it is listening on. Add the following lines before app.listen() is called or where you load other middleware.

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: config.output.publicPath

And that's it for set up. You can now run node index.js and you should see the compiled files being recompiled on any save.

It's important to note that hot loading should only be run in development. So to ensure that, I would recommend having separate config files and checking for environment in index.js