webpack-middleware
Run Webpack compiler as Express.js/Browsersync middleware
Note: This is a fork from webpack-dev-middleware with the only difference that it supports configurations with mixed web/node.js bundles (great for isomorphic apps).
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.
Getting Started
;;; // <- array of Webpack configs;// Launch Webpack compiler in watch modeconst wp = ;// Launch Node.js app in a child process;
Configuration Options
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;webpackDevMiddleware;
Related Projects
- Webpack — JavaScript module bundler
- React Starter Kit — Isomorphic web application boilerplate
- isomorphic-style-loader — Isomorphic CSS styles loader for Webpack