webpack 可以报告哪个文件在 watch 模式下触发了编译吗？

Question

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

我已经配置了一个像这样监听watch-run 编译器事件钩子的插件：

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

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

Webpack 文档在这方面确实缺乏。 Compiler Event Hook 页面没有任何示例（只有一条消息说明示例即将推出），old v1 documentation 在详细阐述 watching/compiler 对象中可用的属性/方法方面并没有好多少.

任何帮助或指导将不胜感激。

Answer 1

对于 Webpack 5，由于 watchFileSystem.watcher.mtimes has been removed，我已将 @sander 的 excellent answer 更改为：

class WatchRunPlugin {
    apply(compiler) {
        compiler.hooks.watchRun.tap('WatchRun', (comp) => {
            if (comp.modifiedFiles) {
                const changedFiles = Array.from(comp.modifiedFiles, (file) => `\n  ${file}`).join('');
                console.log('===============================');
                console.log('FILES CHANGED:', changedFiles);
                console.log('===============================');
            }
        });
    }
}

Answer 2

我在 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("====================================")
      }
    });
  }
}

Answer 3

在 webpack 4 中你可以通过这种方式访问​​watcher：

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();
});

Answer 4

此类信息未包含在 webpack 文档中，并且很难包含编译器上可用的所有可能选项。但我想说这是一个你应该通过阅读源代码或启动调试器并调查它们来探索可用选项的领域。我做了后者，发现更改后的文件在：

watching.compiler.watchFileSystem.watcher.mtimes

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

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

this.plugin("watch-run", (watching, done) => {
  const changedTimes = watching.compiler.watchFileSystem.watcher.mtimes;
  const changedFiles = Object.keys(changedTimes)
    .map(file => `\n  ${file}`)
    .join("");
  if (changedFiles.length) {
    console.log("New build triggered, files changed:", changedFiles);
  }
  done();
});

一个示例输出是：

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

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