如何将动态 webpack bundle.js 名称注入服务器端渲染中的初始 HTML 渲染反应组件？

Question

我正在将一个纯客户端呈现的 React-Redux 项目转换为包括服务器端呈现。根据 reduxJS 手册 (http://redux.js.org/docs/recipes/ServerRendering.html)，将初始组件 HTML 和初始状态注入模板以在客户端呈现的典型样板函数如下所示：

function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          // WARNING: See the following for security issues around embedding JSON in HTML:
          // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\u003c')}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `
}

很明显，在函数的末尾，脚本标记包含客户端应用程序的 bundle.js 文件。

我的问题来了：如果我的 webpack 不是简单地创建一个 bundle.js 而是通过 CommonsChunkPlugin 输出一组带有动态文件命名的包文件，比如：

/bundle.32528d8bc783fafd2585.js  
/vendor.29ce638d0bba925f3e21.js  
/vendor2.da60e4a86c0ac5f28a03.js

我如何 "dynamically" 将这些文件注入上面的 renderFullPage() 函数来替换 <script src="/static/bundle.js"></script> 标签？

在这里使用 HtmlWebpackPlugin 模板似乎不是一个选项。

Answer 1

你应该使用这个包：https://github.com/thejameskyle/react-loadable 作为脚本导入到 html 最小的带有微调器的脚本，当可加载完成下载最终捆绑包时，更改组件。

Answer 2

好吧，事实证明，将纯客户端 React App 转移到 SSR React App 并不像我想象的那么简单。有很多事情需要考虑，很难找到一个教程来很好地概述服务器端渲染。但是，现在 UDEMY 有一个我可以真正推荐的。这是迄今为止我为SSR初学者找到的最全面（或唯一）的：

https://www.udemy.com/server-side-rendering-with-react-and-redux

如何将动态 webpack bundle.js 名称注入服务器端渲染中的初始 HTML 渲染反应组件？

How to inject dynamic webpack bundle.js names into initial HTML rendering react component in Server Side Rendering?

reactjs

webpack

server-side-rendering

react-redux