From 055b651e56ec333b839d6ade30e3e1922c3efbb7 Mon Sep 17 00:00:00 2001 From: wuct Date: Thu, 1 Sep 2016 16:01:14 +0800 Subject: [PATCH 1/5] Remove an unused variable --- middleware.js | 1 - 1 file changed, 1 deletion(-) diff --git a/middleware.js b/middleware.js index b52763955..b557f843d 100644 --- a/middleware.js +++ b/middleware.js @@ -53,7 +53,6 @@ module.exports = function(compiler, options) { if(typeof options.reporter !== "function") options.reporter = defaultReporter; // store our files in memory - var files = {}; var fs = compiler.outputFileSystem = new MemoryFileSystem(); compiler.plugin("done", function(stats) { From b7587200242ecade1bed1c3b8ab30e6677f5ceff Mon Sep 17 00:00:00 2001 From: wuct Date: Thu, 1 Sep 2016 17:22:22 +0800 Subject: [PATCH 2/5] Support for options.serverSideRender If `options.serverSideRender` is true, the middleware will set the `stat` object, which is generated by webpack, to `res`, and all requests will wait for building. --- middleware.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/middleware.js b/middleware.js index b557f843d..a930964a7 100644 --- a/middleware.js +++ b/middleware.js @@ -58,6 +58,7 @@ module.exports = function(compiler, options) { compiler.plugin("done", function(stats) { // We are now on valid state state = true; + webpackStats = stats // Do the stuff in nextTick, because bundle may be invalidated // if a change happened while compiling process.nextTick(function() { @@ -108,6 +109,8 @@ module.exports = function(compiler, options) { // the state, false: bundle invalid, true: bundle valid var state = false; + var webpackStats; + // in lazy mode, rebuild automatically var forceRebuild = false; @@ -194,8 +197,16 @@ module.exports = function(compiler, options) { // The middleware function function webpackDevMiddleware(req, res, next) { + var goNext = function() { + if (!options.serverSideRender) return next() + ready(function() { + res.webpackStats = webpackStats + next() + }, req) + } + var filename = getFilenameFromUrl(req.url); - if(filename === false) return next(); + if(filename === false) return goNext(); // in lazy mode, rebuild on bundle request if(options.lazy && (!options.filename || options.filename.test(filename))) @@ -225,7 +236,7 @@ module.exports = function(compiler, options) { } } } catch(e) { - return next(); + return goNext(); } // server content From 9e4f0e21d9a62139147353950b2dce8c4074e796 Mon Sep 17 00:00:00 2001 From: CT Wu Date: Sun, 4 Sep 2016 13:05:30 +0800 Subject: [PATCH 3/5] Use res.locals instead --- middleware.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/middleware.js b/middleware.js index a41242eef..4f2cee4de 100644 --- a/middleware.js +++ b/middleware.js @@ -200,7 +200,7 @@ module.exports = function(compiler, options) { var goNext = function() { if (!options.serverSideRender) return next() ready(function() { - res.webpackStats = webpackStats + res.locals.webpackStats = webpackStats next() }, req) } From d6148483c4717e72ba4c3667b9df25d8c13225e9 Mon Sep 17 00:00:00 2001 From: CT Wu Date: Sun, 4 Sep 2016 19:17:17 +0800 Subject: [PATCH 4/5] Lint --- middleware.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/middleware.js b/middleware.js index 4f2cee4de..96be0e545 100644 --- a/middleware.js +++ b/middleware.js @@ -59,6 +59,7 @@ module.exports = function(compiler, options) { // We are now on valid state state = true; webpackStats = stats + // Do the stuff in nextTick, because bundle may be invalidated // if a change happened while compiling process.nextTick(function() { @@ -197,8 +198,8 @@ module.exports = function(compiler, options) { // The middleware function function webpackDevMiddleware(req, res, next) { - var goNext = function() { - if (!options.serverSideRender) return next() + function goNext() { + if(!options.serverSideRender) return next() ready(function() { res.locals.webpackStats = webpackStats next() From c8b7ba7235fdb954cbe64a6dea68fea248742764 Mon Sep 17 00:00:00 2001 From: CT Wu Date: Thu, 8 Sep 2016 09:10:32 +0800 Subject: [PATCH 5/5] Add server-sider rendering part to README --- README.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index be3e7692e..9bcc1e13b 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ app.use(webpackMiddleware(webpack({ // but it will work with other paths too. } }), { - // publicPath is required, whereas all other options are optional + // publicPath is required, whereas all other options are optional noInfo: false, // display no info to console (only warnings and errors) @@ -70,6 +70,9 @@ app.use(webpackMiddleware(webpack({ colors: true } // options for formating the statistics + + serverSideRender: false, + // Turn off the server-side rendering mode. See Server-Side Rendering part for more info. })); ``` @@ -109,3 +112,18 @@ This part shows how you might interact with the middleware during runtime: console.log('Package is in a valid state'); }); ``` + +## Server-Side Rendering +In order to develop a server-side rendering application, we need access to the [`stats`](https://github.com/webpack/docs/wiki/node.js-api#stats), which is generated with the latest build. + +In the server-side rendering mode, __webpack-dev-middleware__ sets the `stat` to `res.locals.webpackStats`, then call `next()` to trigger the next middleware, where we can render pages and response to clients. During the webpack building process, all requests will be pending until the build is finished and the `stat` is available. + +```JavaScript +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 +}) +```