将 webpack devserver (HMR) 与使用虚拟主机运行的 PHP 项目连接答案

【问题标题】：connect webpack devserver (HMR) with PHP project running with virtual host将 webpack devserver (HMR) 与使用虚拟主机运行的 PHP 项目连接
【发布时间】：2021-05-05 11:26:47
【问题描述】：

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

有没有配置怎么做。

注意：我尝试使用 devserver 代理但无法弄清楚。

提前致谢。

【问题讨论】：

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

标签： php webpack virtualhost webpack-dev-server wordpress-plugin-creation

【解决方案1】：

对于像这样的自定义设置，获取 HMR 总是很复杂。从理论上讲，这很简单。您只需使用 HMR 模块运行 webpack-dev-server。在您的 PHP 文件中，确保它使用从 webpack-dev-server 生成的 JS 文件。要刷新的代码捆绑在 JS 文件中，因此它应该可以工作。

然而，魔鬼在细节中。您需要确保您的页面和webpack-dev-server 之间的通信没有问题。监控您的 websocket 网络请求并确保它们按预期进行通信。

您可能会遇到的一个问题是安全性，因为 websocket 连接需要不同的主机。在这种情况下，您可以使用以下答案中的配置：I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

另一个问题可能是 JS 文件尝试连接到错误的位置。例如：它认为您的主机是 websocket 连接所在的位置。如果是这种情况，您可以使用public 设置。有关文档，请参见此处：https://webpack.js.org/configuration/dev-server/#devserverpublic

对我来说，这类似于使用反向代理运行。可以看这个讨论来理解问题：https://github.com/webpack/webpack-dev-server/issues/804

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

如何引用生成的 js 文件是一个单独的问题。一个简单的例子是将端口设置为 8081 并将 js 文件捆绑到 bundle.js 中。然后在你的 php 代码中，将其称为http://localhost:8081/bundle.js

【讨论】：