The webpack-dev-middleware, but for isomorphic applications.
$ npm install webpack-isomorphic-dev-middleware --save-dev
The current version works with webpack v2, v3 and v4.
You might get a peer dependency warning when using webpack v2 or v3 but you may ignore it.
Building applications powered by webpack with server-side rendering (isomorphic/universal apps) is hard.
When making a production build, you must compile both the client and server. When developing, we want to rebuild the client & server and bring in the new compiled code without restarting/reloading the application. This is complex, especially setting up the development server.
To make your development workflow easier to setup,
webpack-isomorphic-dev-middleware offers an express middleware that:
isomorphicto res.locals, which includes the webpack stats and the methods exported in your server file
const express = ;const webpack = ;const webpackIsomorphicDevMiddleware = ;const webpackHotMiddleware = ;const clientCompiler = ;const serverCompiler = ;const app = ;// Serve any static files from the public folderapp;// Add the middleware that will wait for both client and server compilations to be readyapp;// You may also add webpack-hot-middleware to provide hot module replacement to the clientapp;// Catch all route to attempt to render our isomorphic appapp;
|memoryFs||Either disable or enable in-memory filesystem (disabling decreases performance)||boolean||true|
|watchOptions||Options to pass to webpack's watch||object|
|watchDelay||Delay calling webpack's watch for the given milliseconds||number||0|
|notify||Report build status through OS notifications||boolean/object||false|
|headers||Headers to be sent when serving compiled files||object|
The middleware function is flexible and supports various signatures:
const clientCompiler = ;const serverCompiler = ;app;
const compiler =;app;
const isomorphicCompiler =;app;
$ npm test
$ npm test -- --watch during development