如何将动态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

我将如何“动态”地将这些文件注入上面的renderFullPage()函数以替换<script src="/static/bundle.js"></script>标记？

在这里，使用HtmlWebpackPlugin模板似乎不是一种选择。

Answer 1

因此，毫不奇怪，将纯客户端React转换为SSR React并不像我想象的那么简单。有许多事情要考虑，很难找到一个教程，提供了服务器端呈现的一个良好的概述。然而，现在有一个在UDEMY，我真的可以推荐。到目前为止，对于SSR初学者来说，这是我发现的最全面的一个：

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

Answer 2

您应该使用这个包：https://github.com/thejameskyle/react-loadable导入作为脚本到html --例如，最小的带有旋转器的脚本，并且当可加载的finish下载最后捆绑时，更改组件。