webpack-hot-middleware
Advanced tools
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.
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');
});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.
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 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 reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server.
This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpack's HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.
If you're using React then some common options are react-transform-hmr and react-hot-loader.
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 plugins to the plugins array:
plugins: [
// OccurrenceOrderPlugin is needed for webpack 1.x only
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
// Use NoErrorsPlugin for webpack 1.x
new webpack.NoEmitOnErrorsPlugin()
]
Occurence ensures consistent build hashes, hot module replacement is somewhat self-explanatory, no errors is used to handle errors more cleanly.
Add 'webpack-hot-middleware/client' into the entry array.
This connects to the server to receive notifications when the bundle
rebuilds and then updates your client bundle accordingly.
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!
Breaking Change
As of version 2.0.0, all client functionality has been rolled into this module. This means that you should remove any reference to webpack/hot/dev-server or webpack/hot/only-dev-server from your webpack config. Instead, use the reload config option to control this behaviour.
This was done to allow full control over the client receiving updates, which is now able to output full module names in the console when applying changes.
More to come soon, you'll have to mostly rely on the example for now.
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'
false to disable the DOM-based client-side overlay.true to auto-reload the page when webpack gets stuck.true to disable informational console logging.true to disable all console logging.true to use webpack publicPath as prefix of path. (We can set __webpack_public_path__ dynamically at runtime in the entry point, see note of output.publicPath)false to use to prevent a connection being automatically opened from the client to the webpack back-end - ideal if you need to modify the options using the setOptionsAndConnect functiontrue to enable client overlay on warnings in addition to errors.Note: Since the
ansiColorsandoverlayStylesoptions are passed via query string, you'll need to uri encode your stringified options like below:
var ansiColors = {
red: '00FF00' // note the lack of "#"
};
var overlayStyles = {
color: '#FF0000' // note the inclusion of "#" (these options would be the equivalent of div.style[option] = value)
};
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true&ansiColors=' + encodeURIComponent(JSON.stringify(ansiColors)) + '&overlayStyles=' + encodeURIComponent(JSON.stringify(overlayStyles));
Configuration options can be passed to the middleware by passing a second argument.
app.use(require("webpack-hot-middleware")(compiler, {
log: false,
path: "/__what",
heartbeat: 2000
}));
false to disable. Defaults to console.logtimeout setting - usually set to half its value.The middleware installs itself as a webpack plugin, and listens for compiler events.
Each connected client gets a Server Sent Events connection, the server will publish notifications to connected clients on compiler events.
When the client receives a message, it will check to see if the local code is up to date. If it isn't up to date, it will trigger webpack hot module reloading.
If you're using multi-compiler mode (exporting an array of config in webpack.config.js), set name parameters to make sure bundles don't process each other's updates. For example:
// webpack.config.js
module.exports = [
{
name: 'mobile',
entry: {
vendor: 'vendor.js',
main: ['webpack-hot-middleware/client?name=mobile', 'mobile.js']
}
},
{
name: 'desktop',
entry: {
vendor: 'vendor.js',
main: ['webpack-hot-middleware/client?name=desktop', 'desktop.js']
}
}
]
Use the hapi-webpack-plugin.
koa-webpack-middleware wraps this module for use with Koa 1.x
koa-webpack can be used for Koa 2.x
If you want to use this module with browsers that don't support eventsource, you'll need to use a polyfill. See issue #11
This is because gzip generally buffers the response, but the Server Sent Events event-stream expects to be able to send data to the client immediately. You should make sure gzipping isn't being applied to the event-stream. See issue #10.
This module expects to remain running while you make changes to your webpack bundle, if you use a process manager like nodemon then you will likely see very slow changes on the client side. If you want to reload the server component, either use a separate process, or find a way to reload your server routes without restarting the whole process. See https://github.com/glenjamin/ultimate-hot-reloading-example for an example of one way to do this.
If you want to use multiple entry points in your webpack config you need to include the hot middleware client in each entry point. This ensures that each entry point file knows how to handle hot updates. See the examples folder README for an example.
entry: {
vendor: ['jquery', 'webpack-hot-middleware/client'],
index: ['./src/index', 'webpack-hot-middleware/client']
}
See LICENSE file.
FAQs
Webpack hot reloading you can attach to your own server
The npm package webpack-hot-middleware receives a total of 0 weekly downloads. As such, webpack-hot-middleware popularity was classified as not popular.
We found that webpack-hot-middleware demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
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.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.