如何在每个服务器请求上设置 webpack public 路径?

How can I set webpack public path on each server request?

我有一个用于客户端和服务器的 webpack 配置,服务器可以访问捆绑代码,这样我就可以调用 react.renderToString(<App>) 来生成 server-side-rendered 内容(然后内容在客户端得到水合)。

服务器安装在 sub-path 中,因此,要在本地使用它,您需要访问 http://localhost:8080/some/path

除了资产路径外,一切都完美无缺!假设 <App> 创建了一个像 <img src="/static/logo.svg"/> 这样的图像(也就是说,App.tsx 导入 ./logo.svg 并在图像标签中使用它),因为服务器安装在 sub-path, HTML URL for logo.svg 应该以 base-path 作为前缀。所以真正的final src应该是/some/path/static/logo.svg.

我可以通过在其他导入之前设置 __webpack_public_path__ 来在客户端上完成这项工作,而且效果很好!但是我怎样才能在服务器上使用它呢?我只知道每个请求的安装位置,并且 __webpack_public_path__ 只能在导入期间设置(据我所知),所以感觉就像我被骨头一样。当然,如果我在启动后更改 __webpack_public_path__,则不会使用新值。

有什么解决办法吗?我很乐意包含任何代码片段以阐明任何上下文。目前,请求通过 request-header 到达服务器,我认为 "just" 使用它作为资产前缀很容易..

供参考,服务器是 Express 服务器,SVG 文件是通过标准 file-loader 加载的。很高兴用其他信息或代码更新我的 Q。几个小时以来,我一直在努力反对这个问题,所以非常感谢任何帮助、见解、想法或猜测(我对 webpack 等人还是很陌生)。

我喜欢愚蠢的计划。现在就执行一个愚蠢的好计划,胜过无休止地寻找聪明的计划。

这是我的愚蠢计划。请注意,这是一个真正的嗡嗡声:

仅在服务器上,我将 __webpack_public_path__ 设置为某个任意标记值,呈现 HTML 输出,然后 我搜索并替换标记值,交换我实际的 public 路径。

我不会说这很优雅,但我可以说的是:它有效。