Webpack的同構渲染

Question

作為思想練習，我一直在嘗試使用Isomorphic React創建博客應用程序。 在進行一些Google搜索之后，我遇到了這三個教程：

中：現代同構堆棧：
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057

我特別困惑的一部分是html-webpack-plugin在服務器端的工作方式。

這兩個教程的模板如下所示：

<html>
<head>
...
</head>
<body>
...
<%- reactOutput %>
</body>
</html>

但是，當我嘗試通過webpack運行該模板時，出現錯誤，指出reactOutput未定義。

在純客戶端應用程序上，我將使用html-webpack-plugin生成要提供給客戶端的index.html文件。 這一代將使我更輕松，因為我在webpack中為開發和生產配置了不同的配置。 （通用塊以及所有這些）

在談論服務器端渲染時，我什至需要考慮這一點嗎？ 還是我要解決所有這些錯誤？

Answer 1

我不認為html-webpack-plugin數字，除非要預先生成模板。 獲得模板內容后，將其與reactOutput的值一起提供給渲染器。

var reactOutput = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);

然后，您將將此變量與模板一起提供。 在本教程中，盡管您可以插入自己的插件，但他們使用ejs進行模板制作：

res.render('index', {
    reactOutput: reactOutput)
});