Webpack & Encore：远程服务器上的 PHP 项目，代理到本地，带有 HMR/自动重新加载 这不会这么难吧？我认为这服务器代理本地主机将是 Webpack/Encore 与 HMR 的一个非常常见的应用程序？

如何解决Webpack & Encore：远程服务器上的 PHP 项目，代理到本地，带有 HMR/自动重新加载 这不会这么难吧？我认为这服务器代理本地主机将是 Webpack/Encore 与 HMR 的一个非常常见的应用程序？

我现在正在为一个问题苦苦挣扎：
我想要一个带有 HMR（热模块替换）的本地 webpack/encore 开发环境，它使用服务器生成的索引文件（来自 Contao-CMS/PHP/MySQL）。

详情：
我有一个远程服务器，可通过 HTTPS（端口 443）访问。我使用的是托管托管包，所以很遗憾我无法在替代端口上运行任何 webpack 服务器，我必须坚持使用端口 80 和 443。
在这个远程服务器上，一个 MySQL 数据库和 PHP (Composer) 正在运行。页面内容由CMS Contao管理。
此远程服务器生成 PHP/HTML/DOM 结构和数据/内容。

我还有一个本地编程环境，其中包含 Webpack、Encore 和我的样式/javascripts。我不想在那里复制我当前的远程 Contao/MySQL 安装。我宁愿从远程服务器获取结构以在我的本地环境中使用。

我最喜欢的设置是：

远程服务器可在https://myserver.de:443
下访问 （端口 443，HTTPS，由 npm run build 构建，运行稳定，可公开访问）

本地服务器在 https://localhost:443（自签名）下运行，用于开发新样式/脚本：它基本上应该从远程服务器（HTML/structure /DOM、一些脚本、图像、所有内容），但提供本地样式/布局/脚本并激活热模块替换 (HMR) 以在更改时自动重新加载。基本上，我想使用现有远程页面中的框架（和内容）实时编辑/重写我的样式。

我的问题是：

这应该可以通过使用代理来管理。
然而，通常你只是代理一个 API-Request 来从远程站点提取数据。
在本地主机上（通常），您拥有索引 (.html/php)、脚本/样式和其他所有内容，并且您仅通过代理 API 请求获取数据/内容。

在我最喜欢的设置中，这不起作用。结构和内容包含在我的（PHP/MySQL/Contao 生成和模板化）index.php 中，这里必须注入来自 localhost 的正确样式/脚本/HMR。 （哪个 webpack 应该开箱即用）

所以基本上，我必须从远程服务器请求/下载/代理 index.php 并在那里注入我的 webpack/encore 样式/脚本，以便进行样式更改和 HMR 工作。

我的计划是：

1. 代理远程服务器上的所有内容，除了 /layout/（存储 Encore 生成的样式/脚本）
2. 从 https://myserver.de
下载/代理 index.php（服务器生成的根页面，包含来自 Contao-CMS-Templates 的所有结构、来自 MySQL 数据库的数据以及指向脚本/样式的链接）
3. Webpack 应该“以某种方式”替换样式/脚本文件（以 index.php 中的 /layout/ 开头）并添加 HMR 脚本并将其作为根页面从 https://localhost 提供
4. 在 https://localhost 上，来自远程服务器的 HTML/DOM/Data/Template 结构被传递，但来自本地环境的样式和脚本 (/layout/) 被 HMR 使用并动态重新加载。立>

这不会这么难吧？我认为这（服务器代理本地主机）将是 Webpack/Encore 与 HMR 的一个非常常见的应用程序？

到目前为止我尝试过的：

• 我设法在本地主机 npm run local 上制作了一个开发服务器，并在远程 npm run server 上制作了第二个开发服务器。 https://mydomain.de 处的服务器从本地服务器 https://localhost:443/layout/ 加载 /layout/ 文件。保存本地文件时，它们会立即上传到远程服务器。两个 webpack 服务器都被重建，并且 https://mydomain.de 上的 HMR 被重新加载。是的，这很丑陋，是的，它有效！ 但是，如果没有使用本地 webpack 服务器的人想要查看页面，则无法加载样式（因为从 https://localhost:443/layout 加载当然会导致超时）。
• 我设法将所有内容（/layout/ 除外）代理到本地主机。在根页面 (/) 上，我禁用了压缩 （否则 gzip 会导致问题，即使使用来自 onProxyRes: responseInterceptor() 的新 http-proxy-middleware 函数，这对我来说仍然有点问题） 。然后，我可以将文件从 https://mydomain.de/layout/xyz.hexcode.css 正则表达式替换为 https://localhost/layout/xyz.css。 但是，webpack 会动态生成（并组合）这些文件，我无法确定 xyz 文件是否在 localhost 上具有完全对应的文件。此外，我还没有设法注入 HMR 代码。

但是“不知何故”这必须更容易实现而无需手动“搜索和替换”？ Webpack/Encore/HMR 已经知道需要哪些文件，所以他们应该“以某种方式”将它们注入（代理/下载的）根页面！？
我错过了什么？

我的文件：

来自 https://myserver.de 的 index.php 的一部分

<!-- these layouts/scripts are from Contao and not served via Webpack/Encore -->
<link rel="stylesheet" href="assets/css/layout.min.css,responsive.min.css,colorbox.min.css,tablesorter.m...-0568d07b.css"> 
<script src="assets/js/jquery.min.js-55e8b57b.js"></script>

<!-- these layout/scripts are generated via Encore and should be served lokally with HMR -->
<link rel="stylesheet" href="/layout/css/base.a195259b3b6d1c0ea116.css">
<link rel="stylesheet" href="/layout/css/3.c051ea961ca07ebe9603.css">
<link rel="stylesheet" href="/layout/css/fonts.1cad325240e751e2982a.css">
<link rel="stylesheet" href="/layout/css/news.25dbe26df9e81062227b.css">
<link rel="stylesheet" href="/layout/css/player.ab38e835c60a5569740b.css">
<link rel="stylesheet" href="/layout/css/nav.bae121a49552892e1ec9.css">
<link rel="stylesheet" href="/layout/css/search.424f2d130fdf3fc848dd.css">
<link rel="stylesheet" href="/layout/css/image.8f8b30f024d7de8ae5dd.css">
<link rel="stylesheet" href="/layout/css/accordion.3167aff65e6d694465f3.css">
<link rel="stylesheet" href="/layout/css/lyrics_chords.b7c98d9b5fe8443510de.css">
<script src="/layout/js/runtime.de3cb55993caa785606e.js"></script>
<script src="/layout/js/0.68475f916dd09a70f2ed.js"></script>
<script src="/layout/js/1.b0717b92f1874e527d29.js"></script>
<script src="/layout/js/base.5b6ff652693c4338465a.js"></script>
<script src="/layout/js/3.a860c6c3271280c8338d.js"></script>
<script src="/layout/js/fonts.fd828da43496442d0bd4.js"></script>
<link rel="stylesheet" href="/layout/css/code.59f6e92a9deeff93d3c4.css">
<script src="/layout/js/nav.f5f43f643bacbe9a2b0f.js"></script>

package.json 的一部分：

  "https": {
    "cert": "key/private.pem","key": "key/private.key","port": "443"
  },"scripts": {
    "local": "encore dev-server --hot --watch --disable-host-check --https --port 443 --cert key/private.pem --key key/private.key","server": "encore dev-server --hot --watch --disable-host-check --host localhost --https --port 443","dev": "encore dev-server --hot --disable-host-check --host localhost --proxy https://mydomain.de","build": "encore production --progress --profile",... and some other test scripts
     ... and lots of dependencies
  },

（不幸的是，--https、--cert 和--key 必须由 CLI 显式添加。否则，它会尝试通过 HTTP 加载 /layout/ - 文件。但让我们专注于 {{1 }} 这里）

（非常小的）webpack.config.js 的一部分

npm run dev