What is webpack-hot-middleware?
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
react-hot-loader
React Hot Loader is specifically designed for React applications. It allows React components to be live reloaded without the loss of state. It's more specialized compared to webpack-hot-middleware, which can be used with any webpack project.
browser-sync
BrowserSync is a tool that offers fast reloading capabilities across multiple devices. While it doesn't require webpack or integrate directly with it as webpack-hot-middleware does, it provides a broader set of features for live reloading and browser testing.
live-server
Live Server is a simple development http server with live reload capability. It's less integrated with webpack's ecosystem compared to webpack-hot-middleware, making it a more general-purpose solution for projects not using webpack.
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
Copyright 2015 Glen Mailer.
MIT Licened.