webpack-dev-middleware
THIS MIDDLEWARE SHOULD ONLY USED FOR DEVELOPMENT!
DO NOT USE IT IN PRODUCTION!
What is it?
It's a simple wrapper middleware for webpack. It serves the files emitted from webpack over a connect server.
It has a few advantages over bundling it as files:
- No files are written to disk, it handle the files in memory
- If files changed in watch mode, the middleware no longer serves the old bundle, but delays requests until the compiling has finished. You don't have to wait before refreshing the page after a file modification.
- I may add some specific optimization in future releases.
Usage
var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(...));
Example usage:
app.use(webpackMiddleware(webpack({
entry: "...",
output: {
path: "/"
}
}), {
noInfo: false,
quiet: false,
lazy: true,
watchOptions: {
aggregateTimeout: 300,
poll: true
},
publicPath: "/assets/",
headers: { "X-Custom-Header": "yes" },
stats: {
colors: true
}
}));
Advanced API
This part shows how you might interact with the middleware during runtime:
-
close(callback)
- stop watching for file changes
var webpackDevMiddlewareInstance = webpackMiddleware();
app.use(webpackDevMiddlewareInstance);
setTimeout(function(){
webpackDevMiddlewareInstance.close();
}, 10000);
-
invalidate()
- recompile the bundle - e.g. after you changed the configuration
var compiler = webpack();
var webpackDevMiddlewareInstance = webpackMiddleware(compiler);
app.use(webpackDevMiddlewareInstance);
setTimeout(function(){
compiler.apply(new webpack.BannerPlugin('A new banner'));
webpackDevMiddlewareInstance.invalidate();
}, 1000);
-
waitUntilValid(callback)
- executes the callback
if the bundle is valid or after it is valid again:
var webpackDevMiddlewareInstance = webpackMiddleware();
app.use(webpackDevMiddlewareInstance);
webpackDevMiddleware.waitUntilValid(function(){
console.log('Package is in a valid state');
});