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)
});