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 theentry
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 wayvar 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 instanceapp.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'
- path - The path which the middleware is serving the event stream on
- timeout - The time to wait after a disconnection before attempting to reconnect
- overlay - Set to
false
to disable the DOM-based client-side overlay. - reload - Set to
true
to auto-reload the page when webpack gets stuck. - noInfo - Set to
true
to disable informational console logging. - reload - Set to
true
to disable all console logging.
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 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.
Copyright 2015 Glen Mailer.
MIT Licened.