Question

我想使用ReactDOMServer.renderToString预编译React组件，然后使用Webpack将其注入我的html-webpack-plugin中。我想提前做。它应编译为静态HTML文件。我的生产环境中没有Node.js服务器来进行服务器端渲染。

换句话说，我有以下内容：

// render.js
import React from 'react';
import { renderToString } from 'react-dom/server';

import MyComponent from 'MyComponent';

export renderToString(<MyComponent />);

，我有以下html-webpack-plugin模板：

<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
    <head>
        <meta charset="utf-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <main id="root"></main>
    </body>
</html>

是否可以将render.js中的结果注入index.ejs中的“ root”元素中？

我已经尝试了一些显而易见的事情，例如<%= require('render.js') %>，但由于它缺少整个React开发环境，因此这永远不会起作用。

html-webpack-plugin提到了EJS模板中可用的“编译对象”，但是我没有找到有关如何使用它的任何文档，因此我无法确定这是否可行

Answer 1

事实证明，“简单的” <%= require('render.js') %>实际上可以工作。我遇到的是another bug，让我觉得没有。

因此完全可以使用Webpack预先编译React组件。（只是不要期望它可以与mini-css-extract-plugin一起使用，直到他们修复该错误为止。）

使用Webpack预编译React

1 个答案: