Webpack的同构渲染

Question

As a thought exercise, I've been trying to create a blogging application using Isomorphic React. 作为思想练习，我一直在尝试使用Isomorphic React创建博客应用程序。 After some google searching I've come across these three tutorials: 在进行一些Google搜索之后，我遇到了这三个教程：

Medium: A Modern Isomorphic stack: 中：现代同构堆栈：
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057 https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057

blog.lunarlogic.org: How to create a universal Reactjs application blog.lunarlogic.org：如何创建通用的Reactjs应用程序
http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/ http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/

One part that I'm confused in particular is with how the html-webpack-plugin works on the server side. 我特别困惑的一部分是html-webpack-plugin在服务器端的工作方式。

Both of these tutorials have templates that look like: 这两个教程的模板如下所示：

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

However, when I try to run this template through webpack, I get errors that reactOutput is undefined. 但是，当我尝试通过webpack运行该模板时，出现错误，指出reactOutput未定义。

On a pure client-side app, I would use html-webpack-plugin to generate my index.html file to be served to the clients. 在纯客户端应用程序上，我将使用html-webpack-plugin生成要提供给客户端的index.html文件。 This generation would make it easier for me because I have different configurations in webpack for dev and production. 这一代将使我更轻松，因为我在webpack中为开发和生产配置了不同的配置。 (Common chunks and all of that) （通用块以及所有这些）

Do I even need to consider that when talking about server side rendering? 在谈论服务器端渲染时，我什至需要考虑这一点吗？ Or am I going about this all wrong? 还是我要解决所有这些错误？

Answer 1

I dont think html-webpack-plugin figures in the equation, except to pre-generate the template. 我不认为html-webpack-plugin数字，除非要预先生成模板。 Once you have the template content you provide it to the renderer along with the value of reactOutput . 获得模板内容后，将其与reactOutput的值一起提供给渲染器。

You make a call like shown here in line 42 to grab the rendered content : 您拨打第42行所示的电话以获取呈现的内容：

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

Then you will be giving this var along with the template. 然后，您将将此变量与模板一起提供。 In the tutorial they use ejs for templating though you can plug in your own: 在本教程中，尽管您可以插入自己的插件，但他们使用ejs进行模板制作：

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

Webpack的同构渲染

问题描述

1 个解决方案

解决方案1
0 2017-05-13 20:43:06

Webpack的同构渲染

问题描述

1 个解决方案

解决方案1 0 2017-05-13 20:43:06

解决方案1
0 2017-05-13 20:43:06