Vue项目Webpack dev server自动生成文件触发无限监听循环如何解决

问题根因说明 #

1. 无限循环原因：watchRun 阶段写入 auto.js 到磁盘后，webpack 文件监听系统检测到该文件变更，会触发新一轮编译，再次进入 watchRun 写入逻辑，形成死循环。
2. emitAsset 不生效原因：emitAsset 是向最终构建产物添加文件，不会被 webpack 当成源码依赖处理，所以项目中引入的 auto.js 还是读取的本地磁盘文件，不会用到你动态生成的内容。

解决方案 #

方案1：最小改动修复现有逻辑 #

核心逻辑是仅当 auto.js 内容真的发生变化时才写入磁盘，从根源避免无意义的变更触发循环，不需要修改现有配置：

const fs = require('fs')
const path = require('path')

class AutoGenerate {
  constructor(options) {
    this.options = options;
    // 缓存上一次生成的内容
    this.lastContent = null;
  }
  apply(compiler) {
    compiler.hooks.watchRun.tap('AutoGenerate', () => {
      const newContent = generateFile()
      // 内容和上次完全一致，跳过写入
      if (newContent === this.lastContent) return
      
      const autoJsPath = path.resolve(__dirname, 'src/plugins/auto.js')
      fs.writeFileSync(autoJsPath, newContent)
      // 更新缓存
      this.lastContent = newContent
    })
  }
}

function generateFile () {
  // 生成auto.js内容并以字符串返回
}

如果需要添加 WatchIgnorePlugin 忽略 auto.js 监听，可以在写入后手动通知 webpack 该模块已变更，保证新内容被纳入编译：

apply(compiler) {
  let autoModule = null
  // 先记录auto.js对应的模块实例
  compiler.hooks.compilation.tap('AutoGenerate', (compilation) => {
    compilation.hooks.finishModules.tap('AutoGenerate', (modules) => {
      autoModule = modules.find(m => m.resource?.endsWith('auto.js'))
    })
  })

  compiler.hooks.watchRun.tap('AutoGenerate', (compiler) => {
    const newContent = generateFile()
    if (newContent === this.lastContent) return
    
    const autoJsPath = path.resolve(__dirname, 'src/plugins/auto.js')
    fs.writeFileSync(autoJsPath, newContent)
    this.lastContent = newContent

    // 手动让该模块失效，下次编译会重新读取
    if (autoModule) {
      compiler.watchFileSystem.watcher?.invalidate(autoJsPath)
      autoModule.buildTimestamp = 0
    }
  })
}

方案2：虚拟模块方案（更优雅，无需写入磁盘） #

直接通过 webpack 钩子动态返回 auto.js 内容，根本不落地磁盘，完全避免文件监听相关问题。
首先安装依赖：
npm install webpack-virtual-modules --save-dev

修改插件代码：

const VirtualModulesPlugin = require('webpack-virtual-modules')

class AutoGenerate {
  constructor(options = {}) {
    this.outputPath = 'src/plugins/auto.js'
    this.virtualModules = new VirtualModulesPlugin()
  }

  apply(compiler) {
    // 注册虚拟模块插件
    this.virtualModules.apply(compiler)

    // 每次编译前更新虚拟模块内容
    compiler.hooks.thisCompilation.tap('AutoGenerate', () => {
      const content = generateFile()
      this.virtualModules.writeModule(this.outputPath, content)
    })
  }
}

function generateFile() {
  // 生成auto.js内容并以字符串返回
}

该方案不需要本地存在 auto.js 文件，也不需要添加任何监听忽略配置，webpack 会直接读取你动态生成的内容纳入编译流程，完全不会出现无限循环问题。

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