The webpack-hot-middleware npm package enables hot reloading of webpack bundles during development. It works in conjunction with webpack-dev-middleware and listens to webpack's compilation to signal the client when updates are available. This allows developers to see changes in their application without a full page refresh, improving the development experience.

What are webpack-hot-middleware's main functionalities?

Hot Module Replacement (HMR) Setup

This code sample demonstrates how to set up a basic Express server with webpack-hot-middleware and webpack-dev-middleware for hot module replacement. It allows changes in the code to be automatically updated in the browser without a full refresh.

const webpack = require('webpack');
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

Other packages similar to webpack-hot-middleware

Readme

Source

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:

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.
Add 'webpack/hot/dev-server' into the entry array. This allows webpack to detect and reload updated modules when notified.
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:

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
}));

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 rely on the example for now.

License

MIT Licened.

FAQs

What is webpack-hot-middleware?

Is webpack-hot-middleware popular?

Is webpack-hot-middleware well maintained?

Last updated on 22 May 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install