如何在 SSR 反应应用程序中将哈希添加到捆绑名称答案

【问题标题】：How to add hash to bundle name in SSR react app如何在 SSR 反应应用程序中将哈希添加到捆绑名称
【发布时间】：2019-11-22 10:54:12
【问题描述】：

我有 ssr 应用和服务器有代码（简化）

 const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path} context={context}>
        <div>{renderRoutes(Routes)}</div>
      </StaticRouter>
    </Provider>
  );

 return `
    <html>
      <head>
      </head>
      <body>
        <div id="root">${content}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;

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

我有两个解决方案：

将插件添加到 webpack，以便它会生成模板（例如 .hbs）文件，其中已经插入了包名称，然后在服务器上对其进行修改以插入其他数据（如元、内容等）。我不喜欢这个解决方案，因为它需要读取每个请求的文件
在编译客户端的 webpack 配置中设置动态 ENV 变量，将其添加到包名称，然后在服务器上的 ENV 中访问

const crypto = require('crypto');
process.env.BUILD_HASH = crypto.randomBytes(20).toString('hex');
const BUILD_HASH = process.env.BUILD_HASH
console.log('building client')

const config = {
  output: {
    filename: `bundle_${BUILD_HASH}.js`,
    path: path.resolve(__dirname, 'public')
  }
};

我不喜欢这个解决方案，因为它需要动态设置 ENV var

【问题讨论】：

我觉得整个“流程”有点不对劲。通常 SSR 的工作原理是让 webpack 构建一个常规的 react 构建，它将输出一个 index.html 和所有 js + css 文件，这些文件正确包含在附加到 script 和 style HTML 正文/标题。您可以在此处告诉 webpack 已经为脚本和 css 使用哈希。然后在您的服务器上，您在 GET 请求（或 cron 作业）期间获得特定的 index.html，并让 SSR 在 root div 上运行，并将空正文替换为 renderToString 结果。您根本不必担心脚本包含。

标签： reactjs server-side-rendering

【解决方案1】：

朋友，使用这个插件并快乐? https://github.com/ztoben/assets-webpack-plugin#configuration

【讨论】：

欢迎提供指向解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及它存在的原因，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【解决方案2】：

也许你可以试试这个插件react-ssr-webpack-plguin。它支持带有哈希的文件名、子资源完整性和内联 JS 到 html。它是在一个具有微小配置的过程中完成的。当服务器和客户端 JS 都发生更改时，它还会在保存时实时重新加载。你也可以video

【讨论】：