如何在服务器端渲染中将动态webpack bundle.js名称注入初始HTML渲染react组件中？
[英]How to inject dynamic webpack bundle.js names into initial HTML rendering react component in Server Side Rendering?
问题描述
I'm transforming a purely client side rendered React-Redux project to include server side rendering as well. 
我正在转换一个纯客户端渲染的React-Redux项目，以包括服务器端渲染。 According to the reduxJS manual ( http://redux.js.org/docs/recipes/ServerRendering.html ) a typical boilerplate function that injects the initial component HTML and initial state into a template to be rendered on the client side looks like this: 根据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>
`
}
So obviously at the end of the function a script-tag is including the bundle.js file for the client-side application. 因此，很明显，在该功能的末尾，脚本标记包括用于客户端应用程序的bundle.js文件。
Here comes my question: What if my webpack doesn't simply create a single bundle.js but rather outputs a set of bundle files with dynamic file naming via the CommonsChunkPlugin like: 我的问题来了：如果我的webpack不只是创建一个bundle.js，而是通过CommonsChunkPlugin来输出一组具有动态文件命名的捆绑文件，例如：
/bundle.32528d8bc783fafd2585.js
/vendor.29ce638d0bba925f3e21.js
/vendor2.da60e4a86c0ac5f28a03.js
How would I "dynamically" inject those files into the renderFullPage() function above replacing the <script src="/static/bundle.js"></script> tag? 在替换<script src="/static/bundle.js"></script>标签之前，我如何“动态”将这些文件注入renderFullPage（）函数？
Using HtmlWebpackPlugin templates doesn't seem to be an option here. 在这里似乎无法使用HtmlWebpackPlugin模板。
2 个解决方案
解决方案1
0 2017-10-05 14:57:29
您应该使用此软件包： https : //github.com/thejameskyle/react-loadable例如，以脚本形式导入带有spinner的html最小的HTML，当可加载完成时，最后下载捆绑，更改组件。
解决方案2
-1 已采纳 2017-10-20 17:23:40
Well, so not surprisingly it turns out that transferring a pure client side React App into a SSR React App isn't as straightforward as I thought it would be. 嗯，所以毫不奇怪，事实证明，将纯客户端React App迁移到SSR React App并不像我想象的那么简单。 There are many things to consider and was hard to find a tutorial that gives a good overview on Server Side Rendering. 有很多事情需要考虑，很难找到一个可以很好地概述服务器端渲染的教程。 However, now there is one at UDEMY that I can really recommend. 但是，现在我真的可以推荐UDEMY中的一个。 It's the most (or only) comprehensive one I've found so far for SSR beginners: 这是我到目前为止为SSR初学者发现的最全面（或唯一）的内容：
https://www.udemy.com/server-side-rendering-with-react-and-redux https://www.udemy.com/server-side-rendering-with-react-and-redux
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.