webpack-hot-middleware
Advanced tools
Package description
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.
Readme
Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server.
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-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.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.
Copyright 2015 Glen Mailer.
MIT Licened.
FAQs
Webpack hot reloading you can attach to your own server
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.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.