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

问题描述

我有 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 中。我可以编辑编译捆绑包的 webpack 配置，以便它会在名称中散列，但服务器代码不知道捆绑包的动态名称。

我有两个解决方案：

将插件添加到 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

标签： reactjsserver-side-rendering

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

问题描述

解决方案

推荐阅读