使用 Webpack 预编译 React答案

【问题标题】：Precompile React with Webpack使用 Webpack 预编译 React
【发布时间】：2019-04-10 00:20:18
【问题描述】：

我想使用 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 中的“根”元素？

我已经尝试了一些显而易见的东西，例如<%= require('render.js') %>，但这永远不会奏效，因为它缺少整个 React 开发环境。

html-webpack-plugin 提到了 EJS 模板中可用的“编译对象”，但我没有找到任何关于如何使用它的文档，所以我不知道这是否是一个可行的选择.

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

事实证明，“简单”<%= require('render.js') %> 确实有效。我遇到的是another bug，这让我觉得不是。

所以用 Webpack 预编译一个 React 组件是完全可能的。（在他们修复错误之前，不要指望它可以与 mini-css-extract-plugin 一起使用。）

【讨论】：