单localhost端口下基于webpack的single-spa多应用热重载实现咨询

核心问题成因 #

当前非主应用改动无法自动刷新的现象，本质是两个独立webpack进程的感知差：

• 主工程下运行的webpack serve，默认文件监听范围仅覆盖自身构建链路从入口解析到的所有依赖路径，也就是main/src、main项目内依赖的npm包等范围；
• 各个子应用、公共包运行的独立webpack --watch进程，编译完成后仅将产物写入共享的main/dist目录，这些外部写入的文件既不在main项目的依赖图里，也未被main的dev server的监听模块捕获，自然不会触发dev server给浏览器推送刷新信号，只能手动刷新页面。

适配当前过渡阶段的可落地方案 #

整套实现不存在架构思路偏差，只是webpack dev server的默认参数没有适配「跨进程共享输出目录」的场景，只要调整几个小配置就能在单localhost端口下跑通全链路自动刷新，完全不需要额外申请服务器资源：

• 打开dev server对静态托管目录的监听开关
  此前使用的--content-base ./dist仅指定了静态资源托管路径，默认情况下dev server不会对这个目录下的文件变更做监听。在main工程的webpack配置中，开启静态目录的文件监听能力：

  // main/webpack.config.js
  const path = require('path');
  module.exports = {
    // ...保留原有全部业务配置
    devServer: {
      static: {
        directory: path.join(__dirname, 'dist'),
        watch: true, // 核心开关：打开dist目录的文件变更监听
      },
      watchFiles: [
        // 兜底配置：全量匹配dist目录下的所有文件写入
        path.join(__dirname, 'dist/**/*'),
      ],
      liveReload: true,
      watchOptions: {
        ignored: /node_modules/ // 排除依赖目录，降低文件监听的性能损耗
      }
    }
  }
  

  配置完成后，无论哪个独立watch进程向dist目录写入更新后的产物文件，dev server捕获到变更就会自动给当前打开的浏览器发送刷新请求，无需手动操作。
• 配套的避坑调整
  • 所有子应用、公共包的webpack输出配置中，关闭output.clean选项。如果开启自动清理，某个子应用重新编译时会清空整个dist目录，误删其他应用的产物；
  • 不要将各个子应用的源码路径直接加入main的watchFiles列表。否则main的dev server会把子应用源码当成自身依赖，触发重复编译，既拖慢构建速度又容易出现模块重复打包的问题。

对于当前临时本地调试的场景，上面的自动刷新配置已经完全满足需求，和后续切换到官方推荐的多应用独立部署的开发模式也完全兼容，不会产生额外的迁移成本。

内容的提问来源于stack exchange，提问作者McGuireV10