将webpack devserver（HMR）与使用虚拟主机运行的PHP项目连接起来

目前，我正在开发一个带有React前端的WordPress插件。 我尝试将在虚拟主机上运行的后端（PHP）连接到webpack devserver和热模块替换（HMR）

是否有任何配置如何做到这一点

注意：我试过使用devserver代理，但没有找到答案

---

提前感谢。

对于这样的自定义设置，获取HMR总是很复杂。理论上，这很简单。您只需使用HMR模块运行

webpack dev server

。在PHP文件上，确保它使用从

webpack dev server

生成的JS文件。要刷新的代码捆绑在JS文件中，因此应该可以正常工作

然而，魔鬼在于细节。您需要确保页面与

webpack dev server

之间的通信正常工作。监视您的websocket网络请求，并确保它们按预期进行通信

您可能会遇到的一个问题是安全性，因为websocket连接需要一个不同的主机。在这种情况下，您可以使用以下答案中的配置：

另一个问题可能是JS文件试图连接到错误的位置。它认为您的主机是websocket连接所在的位置。如果是这种情况，您可以使用

public

设置。有关文档，请参见此处：

对我来说，这类似于使用反向代理运行。您可以通过以下讨论了解问题：

---

可能还有其他问题。您只需要检查websocket连接，确保它们通信没有问题

如何引用生成的js文件是一个单独的问题。一个简单的例子是将端口设置为8081，并将js文件绑定到

bundle.js

。然后在php代码中，将其称为

http://localhost:8081/bundle.js

---

你能解释一下PHP与Webpack和HMR的关系吗？Webpack是用于JavaScript的，而不是用于PHP代码。HMR根据您在本地PC或远程服务器上运行dev服务器的位置工作。实际上，我正在开发一个WordPress插件，其中我的插件运行在WordPress项目中的index.php文件中，该文件也是从php文件运行的。如果我单独运行Javascript项目，它将无法从父WordPress项目继承任何属性和配置。因此，我想通过WordPress运行我的应用程序，并继续监视我的js文件。我仍然不明白Webpack将如何执行您的PHP脚本（当浏览器发出请求时），以便它可以通过开发服务器提供PHP输出？如果我简单地说，我的项目通过带有index.PHP的PHP服务器运行，该文件包含一些javascript文件。所以我想看那些使用HMR的js。我能做到，但我不怀疑你能做到。HMR不是这样工作的。