File webpack能否报告在监视模式下触发编译的文件？

我想让Webpack记录哪个文件触发了我的监视模式构建

我已经配置了一个插件，它监听

监视运行

编译器事件挂钩，如下所示：

function() {
  this.plugin("watch-run", function(watching, callback) {
    // maybe something in `watching` will indicate the changed file?
    // when I find out what it is, `console.log` it here
    callback();
  });
}

// Example output: "/Users/aaron/git/test/index.js" was changed, new build triggered

但我无法确定更改的文件信息可能在哪里，如果它确实存在的话

这方面的网页文档确实很缺乏。该页面没有任何示例（只有一条消息解释示例即将到来），并且在详细说明

监视

/

编译器

对象中可用的属性/方法方面也没有太多优势

---

非常感谢您提供任何帮助或指导。

此类信息不在网页文档中，很难包含编译器上的所有可能选项。但是我想说的是，在这个领域中，您应该通过阅读源代码或旋转调试器来探索可用的选项并进行调查。我做了后者，发现更改的文件在以下位置可用：

watching.compiler.watchFileSystem.watcher.mtimes

这是一个对象，其中每个键都是已更改文件的绝对路径，该值是已更改文件的时间戳。当在配置的轮询间隔内保存了多个更改时，可能会有多个文件更改触发重新编译

以下代码打印已更改的文件（文件也可能为空）：

这方面的一个示例输出是：

New build triggered, files changed:
  /path/to/app/src/components/item/Item.js
  /path/to/app/src/App.js

---

注意：此输出将在打印最终统计数据之前出现。

在第4页中，您可以通过以下方式访问

观察者：

getChangedFiles(compiler) {
  const { watchFileSystem } = compiler;
  const watcher = watchFileSystem.watcher || watchFileSystem.wfs.watcher;

  return Object.keys(watcher.mtimes);
}

后者在watchRun钩子中

compiler.hooks.watchRun.tapAsync('plugin name', (_compiler, done) => {
  const changedFile = this.getChangedFiles(_compiler)

  // ...

  return done();
});

我在Webpack 4中使用的插件：

class WatchRunPlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tap('WatchRun', (comp) => {
      const changedTimes = comp.watchFileSystem.watcher.mtimes;
      const changedFiles = Object.keys(changedTimes)
        .map(file => `\n  ${file}`)
        .join('');
      if (changedFiles.length) {
        console.log("====================================")
        console.log('NEW BUILD FILES CHANGED:', changedFiles);
        console.log("====================================")
      }
    });
  }
}

对于Webpack 5，自
watchFileSystem.watcher.mtimes
以来，我将@sander更改为：

类WatchRunPlugin{
应用（编译器）{
compiler.hooks.watchRun.tap（'watchRun'，（comp）=>{
if（组件修改文件）{
const changedFiles=Array.from（comp.modifiedFiles，（file）=>`\n${file}`）。join（“”）；
console.log（'========================================'）；
log（'FILES CHANGED:'，changedFiles）；
console.log（'========================================'）；
}
});
}
}
感谢您分享此信息。。。您的代码使我能够找出由code coverage module.awesome创建的一个散乱的.html文件在我的项目中不间断地连续重建HMR的原因。我使用的是Laravel mix，出于某种原因，我不得不为此添加一个构造函数
constructor（）{}
，如果这不起作用，请查看下面的答案，其中使用了第二个参数
done
（或文档中的
callback
）。如果不在最后调用回调，我就无法让它工作。我只是在webpack.config.js文件的类型中复制它，然后将
newwatchrunplugin（）
添加到我的插件中，然后。。。鲍勃是你叔叔。如果你在使用
WatchIgnorePlugin
你需要：
const-watcher=comp.watchFileSystem.wfs？comp.watchFileSystem.wfs.watcher:comp.watchFileSystem.watcher；const changedTimes=watcher.mtimes
class WatchRunPlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tap('WatchRun', (comp) => {
      const changedTimes = comp.watchFileSystem.watcher.mtimes;
      const changedFiles = Object.keys(changedTimes)
        .map(file => `\n  ${file}`)
        .join('');
      if (changedFiles.length) {
        console.log("====================================")
        console.log('NEW BUILD FILES CHANGED:', changedFiles);
        console.log("====================================")
      }
    });
  }
}