- Notifications
You must be signed in to change notification settings - Fork43
🔥 Hot reload webpack bundles on the server
License
60frames/webpack-hot-server-middleware
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Webpack Hot Server Middleware is designed to be used in conjunction withwebpack-dev-middleware (and optionallywebpack-hot-middleware) to hot update Webpack bundles on the server.
When creating universal Web apps it's common to build two bundles with Webpack, one client bundletargeting 'web' and another server bundle targeting 'node'.
The entry point to the client bundle renders to the DOM, e.g.
// client.jsimportReactDOMfrom'react-dom';importAppfrom'./components/App';ReactDOM.render(<App/>,document.getElementById('root'));
And the entry point to the server bundle renders to string, e.g.
// server.jsimport{renderToString}from'react-dom/server';importAppfrom'./components/App';exportdefaultfunctionserverRenderer(){return(req,res,next)=>{res.status(200).send(` <!doctype html> <html> <head> <title>App</title> </head> <body> <div>${renderToString(<App/>)} </div> <script src="/client.js"></script> </body> </html> `);};}
NOTE: The server bundle is itself middleware allowing you to mount it anywhere in an existing node server, e.g.
constexpress=require('express');constserverRenderer=require('./dist/server');constapp=express();app.use(serverRenderer());app.listen(6060);
Given this setup it's fairly easy to hook up hot module replacement for your client bundle usingwebpack-dev-server orwebpack-hot-middleware however these middlewares don't handle server bundles meaning you need to frequently restart your server to see the latest changes.
Webpack Hot Server Middleware solves this problem, ensuring the server bundle used is always the latest compilation without requiring a restart. Additionally it allows your client and server bundle to share the same Webpack cache for faster builds and uses an in-memory bundle on the server to avoid hitting the disk.
It turns out hot module replacement is much easier on the server than on the client as you don't have any state to preserve because middleware is almost always necessarily stateless, so the entire bundle can be replaced at the top level whenever a change occurs.
Webpack Hot Server Middleware expects your Webpack config to export anarray of configurations, one for your client bundle and one for your server bundle, e.g.
// webpack.config.jsmodule.exports=[{name:'client',target:'web',entry:'./client.js'...},{name:'server',target:'node',entry:'./server.js'...}];
NOTE: It's important both the 'client' and 'server' configs are given a name prefixed with 'client' and 'server' respectively.
It then needs to be mounted immediately afterwebpack-dev-middleware, e.g.
constexpress=require('express');constwebpack=require('webpack');constwebpackDevMiddleware=require('webpack-dev-middleware');constwebpackHotServerMiddleware=require('webpack-hot-server-middleware');constconfig=require('./webpack.config.js');constapp=express();constcompiler=webpack(config);app.use(webpackDevMiddleware(compiler,{serverSideRender:true}));app.use(webpackHotServerMiddleware(compiler));app.listen(6060);
Now whenever Webpack rebuilds, the new bundle will be used both client andserver side.
webpackHotServerMiddleware(compiler: MultiCompiler, options?: Options) => void
chunkNamestringThe name of the server entry point, defaults to 'main'.
serverRendererOptionsobjectMixed in withclientStats &serverStats and passed to theserverRenderer.
A simple example can be found in theexample directory and a more real world example can be seen in the60fram.es boilerplate.
webpack-hot-middleware needs to be mountedbeforewebpack-hot-server-middleware to ensure client hot module replacement requests are handled correctly, e.g.
constexpress=require('express');constwebpack=require('webpack');constwebpackDevMiddleware=require('webpack-dev-middleware');constwebpackHotMiddleware=require('webpack-hot-middleware');constwebpackHotServerMiddleware=require('webpack-hot-server-middleware');constconfig=require('./webpack.config.js');constapp=express();constcompiler=webpack(config);app.use(webpackDevMiddleware(compiler,{serverSideRender:true}));// NOTE: Only the client bundle needs to be passed to `webpack-hot-middleware`.app.use(webpackHotMiddleware(compiler.compilers.find(compiler=>compiler.name==='client')));app.use(webpackHotServerMiddleware(compiler));app.listen(6060);
A production setup might conditionally useexpress.static instead ofwebpack-dev-server and a pre-built server bundle instead ofwebpack-hot-server-middleware, e.g.
constexpress=require('express');constpath=require('path');constapp=express();if(process.env.NODE_ENV!=='production'){constwebpack=require('webpack');constwebpackDevMiddleware=require('webpack-dev-middleware');constwebpackHotMiddleware=require('webpack-hot-middleware');constwebpackHotServerMiddleware=require('webpack-hot-server-middleware');constconfig=require('./webpack.config.js');constcompiler=webpack(config);app.use(webpackDevMiddleware(compiler,{serverSideRender:true}));app.use(webpackHotMiddleware(compiler.compilers.find(compiler=>compiler.name==='client')));app.use(webpackHotServerMiddleware(compiler));}else{constCLIENT_ASSETS_DIR=path.join(__dirname,'../build/client');constCLIENT_STATS_PATH=path.join(CLIENT_ASSETS_DIR,'stats.json');constSERVER_RENDERER_PATH=path.join(__dirname,'../build/server.js');constserverRenderer=require(SERVER_RENDERER_PATH);conststats=require(CLIENT_STATS_PATH);app.use(express.static(CLIENT_ASSETS_DIR));app.use(serverRenderer(stats));}app.listen(6060);
MIT
About
🔥 Hot reload webpack bundles on the server
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.