Question

我正在研究react / webpack Web应用程序的服务器端呈现。然后我想知道..是否有任何简单的方法来处理webpack生成的静态文件？所以服务器端渲染器读取包含该bundle的index.html文件，在其中运行javascript，以便将react应用程序注入到html中，然后返回结果...

类似的东西：

的index.html

<html>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

entry.js （构建bundle.js的webpack条目）

import React from 'react';
import ReactDOM from 'react-dom';
import Application from 'src/Application';

ReactDOM.render(
    React.createElement(Application)
);

Application.jsx

export default function() {
    return (
        <div>Hello World!</div>
    );
}

然后在阅读并处理index.html之后，可以发送给客户端的结果应该是：

<html>
    <body>
        <div id="app">
            <div>Hello World!</div>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

情境

关于SSR的教程要么尝试将反应代码服务器呈现为html，要么运行webpack然后读取包文件以运行包代码将结果html注入索引模板。

运行ReactDOMServer.renderAsString不能与我当前的源一起使用，因为它们导入了由webpack加载器捕获的非js文件（如组件css文件）。我知道我可以将css导入移动到一个单独的文件中，但我希望保持源不变。

通过解析静态包文件来节点服务器端呈现

0 个答案: