webpack-dev-middleware
THIS MIDDLEWARE SHOULD ONLY BE 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.
Installation
npm install webpack-dev-middleware --save-dev
Usage
var webpackMiddleware = ;app;
Example usage:
app;
Advanced API
This part shows how you might interact with the middleware during runtime:
-
close(callback)
- stop watching for file changesvar webpackDevMiddlewareInstance = ;app;// After 10 seconds stop watching for file changes:; -
invalidate()
- recompile the bundle - e.g. after you changed the configurationvar compiler = ;var webpackDevMiddlewareInstance = ;app;; -
waitUntilValid(callback)
- executes thecallback
if the bundle is valid or after it is valid again:var webpackDevMiddlewareInstance = ;app;webpackDevMiddlewareInstance;
Server-Side Rendering
Note: this feature is experimental and may be removed or changed completely in the future.
In order to develop a server-side rendering application, we need access to the stats
, which is generated with the latest build.
In the server-side rendering mode, webpack-dev-middleware would sets the stat
to res.locals.webpackStats
before invoking the next middleware, where we can render pages and response to clients.
Notice that requests for bundle files would still be responded by webpack-dev-middleware and all requests will be pending until the building process is finished in the server-side rendering mode.
app.use(webpackMiddleware(compiler, { serverSideRender: true }) // The following middleware would not be invoked until the latest build is finished.app.use((req, res) => { const assetsByChunkName = res.locals.webpackStats.toJson().assetsByChunkName // then use `assetsByChunkName` for server-sider rendering // For example, if you have only one main chunk: res.send(`<html> <head> <title>My App</title> ${ assetsByChunkName.main .filter(path => path.endsWith('.css')) .map(path => `<link rel="stylesheet" href="${path}" />`) } </head> <body> <div id="root"></div> ${ assetsByChunkName.main .filter(path => path.endsWith('.js')) .map(path => `<script src="${path}" />`) } </body></html> `) })