时间戳

首页 > 解决方案 > 从单个端口上的多个监视的应用程序热重载

webpack - 从单个端口上的多个监视的应用程序热重载

问题描述

我们正试图弄清楚如何让 webpack 在单个 localhost 端口后热重载多个应用程序。我们在 Lerna 驱动的 monorepo 中有一个基于 React 的单水疗（微前端）应用系统。（这是非常早期的开发，所以我们还没有可用的专用服务器，所以推荐的单一 spa 方法来部署所有东西，除了一个被修改的应用程序是不可能的。）

我们的目录结构如下所示：

source
  |--apps
  |    |--reactapp1
  |    |--reactapp2
  |    |--reactapp3
  |
  |--main
  |    |--dist
  |
  |--shared
       |--component1
       |--component2

我们所做的是配置所有应用程序和组件，以便它们的构建输出转到main/dist，这允许我们在主文件夹以及每个应用程序和共享文件夹中lerna run --parallel调用。webpack servewebpack --watch

但是，这需要添加--content-base ./dist到 serve 命令中，以便还从非主要应用程序和组件中提供已编译的 .js 文件，我认为这就是麻烦的开始。

一切正常，main/src更新时，webpack 会重新编译，浏览器会自动重新加载。但是，如果我修改类似的东西，reactapp1/src或者component1/src我看到 webpack 观察程序重新编译，但服务器进程无法识别 .js 更改为main/dist. 我们必须手动刷新浏览器。

是否有一种合理标准化的方式来实现这项工作，或者我们是否朝着错误的方向前进？

（在任何人说“不要这样做”之前——我们意识到随着应用程序的增长，这将很难扩展，这只是为了支持最初的开发工作。我们处于一个大型企业环境中，分配服务器是无穷无尽的混乱文书工作、审批和官僚作风。最终，我们将遵循推荐的模式，将大多数应用程序和共享包部署到专用服务器。）

标签： webpackwebpack-watch

解决方案

为了让页面重新加载正常工作，我只需将--watch-content-base开关添加到我的“服务”过程中。那时，我的问题中的场景确实会在修改任何应用程序时自动重新加载页面。（更有用的热模块更换/HMR 涉及更多，并不是我们在早期阶段所追求的。）

服务脚本（在“main”中运行，single-spa root-config 应用程序）：

"start": "webpack serve --content-base ../../main/dist --watch-content-base --mode=development --https --port 9000 --env isLocal=true"

监视脚本（未更改，在所有其他应用程序目录中运行）：

"watch": "webpack --watch --mode=development --env isLocal=true"

这是使用 webpack 4.45.0。

推荐阅读