node.js - 如何在每个服务器请求上设置 webpack 公共路径？

Question

我有一个用于客户端和服务器的 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__在启动后更改，则不会使用新值。

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

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

标签： node.jsreactjsexpresswebpackbase-path

Answer 1

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

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

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

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