webpack dev middleware

HQidea edited this page Dec 29, 2016 · 13 revisions

Note: The webpack-dev-middleware is for advanced users. See webpack-dev-server for a ready-to-use solution.
Note: For multiple webpack configuration see middware or dev-middleware
If you are looking for this middleware for koa2 ecosystem loaded with HMR support see at koa-webpack-middleware.

The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle.

You can use it in two modes:

  • watch mode (default): The compiler recompiles on file change.
  • lazy mode: The compiler compiles on every request to the entry point.


var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");

var compiler = webpack({
	// configuration
	output: { path: '/' }

app.use(webpackDevMiddleware(compiler, {
	// options



Display no info to console (only warnings and errors)

Default: false


Display nothing to the console

Default: false


Switch into lazy mode.

Default: false

In lazy mode: Switch request should trigger the compilation.


In most cases this equals the webpack configuration option output.filename.


Delay the rebuilt after the first change. Value is a time in ms.

Default: 300


true: use polling

number: use polling with specified interval

Default: undefined

publicPath (required)

The path where to bind the middleware to the server.

In most cases this equals the webpack configuration option output.publicPath.


Add custom headers. i. e. { "X-Custom-Header": "yes" }


Output options for the stats. See node.js API.


Manually invalidate the compilation. Useful if stuff of the compiler has changed.


A readable (in-memory) filesystem that can access the compiled data.