如何告知Vite自定义loader加载的源文件变更时触发HMR

你在插件逻辑中手动通过文件系统读取的stylus依赖文件，Vite默认无法自动识别为模块的依赖，必须手动注册到Vite的文件监听列表，才能在文件变更时触发对应模块的重新加载与HMR，具体实现方式如下：

• 在load或者transform钩子的执行上下文中，调用this.addWatchFile()方法，将所有你读取过的stylus源文件的绝对路径作为参数传入，Vite会自动将这些文件加入监听队列，文件修改后会自动触发依赖该文件的模块重新执行load/transform流程。
  示例代码：

  export default function stylusExtractPlugin() {
    return {
      name: 'vite-plugin-stylus-extract',
      async load(id) {
        // 原有逻辑：判断是否为需要处理的目标模块
        if (!isTargetStylusEntry(id)) return null
        
        // 原有逻辑：递归解析当前入口stylus引入的所有依赖文件路径
        const allDeps = await traverseStylusImports(id)
        
        // 核心：将所有依赖文件注册到Vite监听列表
        allDeps.forEach(depPath => {
          this.addWatchFile(depPath)
        })
        
        // 原有逻辑：处理stylus内容、提取CSS值后返回模块代码
        return generateModuleContent(allDeps)
      }
    }
  }
  

• 注意事项：
  • 传入addWatchFile的路径必须是文件系统的绝对路径，传入相对路径会导致Vite无法正确定位文件，监听失效。
  • 如果stylus文件存在多层嵌套引入（如a引入b，b引入c），必须递归收集所有层级的依赖文件并全部注册，否则深层依赖文件修改不会触发重载。
  • 如果你在handleHotUpdate钩子中有自定义热更新逻辑，也可以在该钩子中通过this.addWatchFile补充注册依赖。

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