Reactjs 如何在SSR react应用程序中将哈希添加到捆绑包名称

我有ssr应用程序，服务器有代码（简化）

const content=renderToString(
{renderRoutes（Routes）}
);
返回`
${content}
`;

问题是，a希望将哈希添加到由webpack组成的bundle.js中。我可以编辑编译包的webpack配置，这样它会在名称中散列，但服务器代码不知道包的动态名称

我有两个解决方案：

将插件添加到webpack，这样它将生成模板（例如，

.hbs

）文件，其中已插入捆绑包名称，然后在服务器上对其进行修改以插入其他数据（如元数据、内容等）。我不喜欢这个解决方案，因为它需要在每次请求时读取文件

在编译客户端的webpack配置中设置dynamic ENV变量，将其添加到bundle name中，然后在服务器上的ENV中访问

const crypto=require（'crypto'）；
process.env.BUILD_HASH=crypto.randomBytes（20）.toString（'hex'）；
const BUILD\u HASH=process.env.BUILD\u HASH
console.log（'building client'）
常量配置={
输出：{
文件名：`bundle\u${BUILD\u HASH}.js`，
path:path.resolve（_dirname，'public'））
}
};

---

我不喜欢这个解决方案，因为它需要动态地设置ENV var，使用这个插件并快乐，朋友，使用这个插件并快乐，我觉得整个“流程”有点错误。SSR的工作原理通常是让webpack构建一个常规的react构建，它将输出一个

index.html

和所有

js

+

css

文件，这些文件正确地包含在

脚本

和

样式

标记中，附加到html主体/头部。您可以告诉这里的webpack已经对脚本和css使用了哈希。然后在服务器上，在get请求（或crone作业）期间获得特定的

index.html

，让SSR在

root

div上运行，并用

renderToString

结果替换空主体。你根本不必担心脚本包含。我觉得整个“流程”有点错误。SSR的工作原理通常是让webpack构建一个常规的react构建，它将输出一个

index.html

和所有

js

+

css

文件，这些文件正确地包含在

脚本

和

样式

标记中，附加到html主体/头部。您可以告诉这里的webpack已经对脚本和css使用了哈希。然后在服务器上，在get请求（或crone作业）期间获得特定的

index.html

，让SSR在

root

div上运行，并用

renderToString

结果替换空主体。您根本不必担心脚本包含。欢迎提供指向解决方案的链接，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。