使用 Webpack 进行同构渲染答案

【问题标题】：Isomorphic Rendering with Webpack使用 Webpack 进行同构渲染
【发布时间】：2017-10-12 22:42:38
【问题描述】：

作为一个思考练习，我一直在尝试使用 Isomorphic React 创建一个博客应用程序。经过一些谷歌搜索后，我遇到了这三个教程：

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

这两个教程都有如下模板：

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

但是，当我尝试通过 webpack 运行此模板时，我收到 reactOutput 未定义的错误。

在纯客户端应用程序中，我将使用 html-webpack-plugin 生成我的 index.html 文件以提供给客户端。这一代对我来说会更容易，因为我在 webpack 中有不同的配置用于开发和生产。（常见的块和所有这些）

在谈论服务器端渲染时，我什至需要考虑这一点吗？还是我做错了？

【问题讨论】：

【解决方案1】：

我不认为html-webpack-plugin 等式中的数字，除了预先生成模板。获得模板内容后，将其连同 reactOutput 的值一起提供给渲染器。

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

然后您将与模板一起提供此 var。 In the tutorial they use ejs for templating 虽然你可以自己插入：

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

【讨论】：

我明白你的意思是使用html-webpack-plugin 的输出作为模板，使用res.render 或res.send 从服务器提供服务，但是我从@ 得到的错误呢987654331@ 未定义？我想我可以解决的一种方法是将整个文件作为字符串读取，然后替换模板代码，但这将如何工作？
这正是服务器端渲染的工作方式。使用 ReactDOMServer，您可以在内存中渲染应用程序，然后将其返回给客户端。您还需要弥补一个空白，“如何将内存中的字符串放入模板中？”您链接的教程显示了如何使用 ejs 进行模板化。这个更接近你的模板设置：bitdrift.com/post/2376383378/…
我最终使用fs.readFileSync 读取模板并使用string.replace 将服务器端反应注入模板。可能不是最好的方法，但似乎有效。