如何在SSR react app中将哈希添加到捆绑包名称

问题描述 投票：0回答：1

我有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配置，以便它将名称散列，但是服务器代码不知道捆绑软件的动态名称。

我有两种解决方法：

  1. 将插件添加到webpack中，这样它将创建已经插入了包名的模板（例如.hbs）文件，然后在服务器上对其进行修改以插入其他数据（例如元数据，内容等）。我不喜欢这种解决方案，因为它将需要在每个请求上读取文件
  2. 在webpack config中设置动态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

reactjs ssr
1个回答
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.