如何在每个服务器请求上设置 webpack 公共路径？答案

【问题标题】：How can I set webpack public path on each server request?如何在每个服务器请求上设置 webpack 公共路径？
【发布时间】：2023-03-24 01:28:02
【问题描述】：

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

服务器安装在子路径中，因此，要在本地使用它，您需要访问http://localhost:8080/some/path。

除了资产路径之外，一切都完美无缺！假设<App> 创建了一个图像，例如<img src="/static/logo.svg"/>（即App.tsx 导入./logo.svg 并在图像标记中使用它），因为服务器安装在子路径中，即logo.svg 的HTML URL应该以基本路径为前缀。所以真正的最终src应该是/some/path/static/logo.svg。

我可以通过在其他导入之前设置__webpack_public_path__ 来在客户端上完成这项工作，效果非常好！但是我如何在服务器上使用它呢？我只知道每个请求安装在哪里，而__webpack_public_path__ 只能在导入期间设置（据我所知），所以感觉就像我已经筋疲力尽了。当然，如果我在启动后更改__webpack_public_path__，则不会使用新值。

有什么解决办法吗？我很高兴包含任何 sn-ps 代码以阐明任何上下文。目前，请求通过请求标头到达服务器，我认为“仅”使用它来为资产添加前缀很容易..

作为参考，服务器是 Express 服务器，SVG 文件是通过标准文件加载器加载的。很高兴用其他信息或代码更新我的 Q。我已经为此苦苦思索了好几个小时，因此非常感谢任何帮助、见解、想法或猜测（我对 webpack 等人还很陌生）。

【问题讨论】：

标签： node.js reactjs express webpack base-path

【解决方案1】：

我喜欢愚蠢的计划。现在执行一个好的愚蠢计划总比无休止地寻找聪明的计划要好。

所以这是我的愚蠢计划。请注意，这是一个真正的humdinger：

仅在服务器上，我将 __webpack_public_path__ 设置为任意标记值，渲染 HTML 输出，然后搜索并替换标记值，在我的实际公共路径中进行交换。

我不会声称这是优雅的，但我可以说的是：它有效。

【讨论】：