使用 Webpack 进行初始静态 React HTML 渲染答案

【问题标题】：Initial static React HTML rendering with Webpack使用 Webpack 进行初始静态 React HTML 渲染
【发布时间】：2017-06-20 01:38:41
【问题描述】：

有没有办法直接在 HTML 入口点中预生成（单路由）React 应用程序的 HTML 结构？

然后页面将能够在任何 JS 加载之前显示 HTML（基于 React 初始状态）。

我实际上正在使用webpack-html-loader，但欢迎使用任何其他加载器或插件；）

PS：请问static-site-generator-webpack-plugin有什么帮助吗？

PS：我没有使用 React Router

【问题讨论】：

你试过服务端渲染吗？
@Bezzi 你能更明确一点吗？就像共享 webpack.config :D 我需要在构建时生成静态 HTML
只有在整个页面是静态的情况下才能执行此操作。没有与 API 通信？

标签： reactjs webpack webpack-html-loader

【解决方案1】：

如果你想使用 static-site-generator-webpack-plugin，你首先需要使用 webpack bundle.js 构建一个包，它导出一个带有以下参数的渲染函数。

locals 具有各种页面元数据的对象，例如title 进入组件参数（传统上被认为是模板变量）。
callback 一个 nodejs 样式 (err, result) 回调，您将使用呈现的 html 作为 result 的值来调用它

例如

// entry.js, compiled to bundle.js by webpack

module.exports = function render(locals, callback) {
  callback(null, 
      '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};

在这个函数中，您将实例化您的组件（如果需要，可以通过 React Router）并使用ReactDOMServer.renderToString() 渲染它们。

然后，您将在 StaticSiteGeneratorPlugin 的实例化中将编译后的 bundle.js 指定为 bundle，并在 paths 和 locals 中指定包含上述元数据值的对象。

var paths, locals; // compute paths from metadata files or frontmatter

module.exports = {
  entry: {
    bundle: './entry.js' // build bundle.js from entry.js source
  },
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin('bundle', paths, locals)
  ]
}

您为webpack.config.js 中的locals 指定的键将出现在每次调用render(locals, callback) 的locals 参数中。它们将与插件提供的path、assets 和webpackStats 键合并。

如果您想在渲染后将 javascript 代码加载到您的页面中，您可以在 webpack 配置中编译一个额外的 page.js 条目，该条目以典型方式调用 ReactDOM.render()，然后将该包加载到由发出的 script 标记中在bundle.js 中的render(locals, callback) 函数中（上图）。确保 page.js 将组件安装到 DOM 中的相同位置，因为它们在由 entry.js 呈现时（您可能会在父元素上设置 id 属性）。您还需要确保任何位置（即路线路径）因变量在两种环境中都对齐。

查看Gatsby 的源代码，它也使用了这个插件。您还可以查看Phenomic 的源代码以了解替代方法。

【讨论】：

【解决方案2】：

您应该尝试服务器端渲染，它会让 React 在后端渲染您应用的第一个视图并提供静态 HTML。 This boilerplate 已经带有服务器渲染设置，您可以了解更多信息here

【讨论】：

当然可以，但是我需要以完全静态的方式（没有快递）.. 初始 HTML 渲染应该在构建时进行（运行 webpack 时）.. 有什么可以分享的例子吗？

【解决方案3】：

Jekyll 是很棒的静态站点生成器，可以使用自定义 ruby 插件进行扩展。您需要启用 WebPack 来进行 Jekyll 调用。见Plugging Webpack to Jekyll Powered Pages

【讨论】：

【解决方案4】：

这里有一个工作示例 https://github.com/aganglada/preact-minimal/blob/master/config/webpack.config.js，如果你愿意，可以分叉它，看看它是如何一起工作的。

希望对你有帮助:)

【讨论】：