Can webpack report which file triggered a compilation in watch mode?

Question

I would like for Webpack to log which file triggered my watch mode build.

I have configured a plugin that listens to the watch-run compiler event hook like this:

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

But I cannot figure out where the changed file information might be, if it is there at all.

The Webpack documentation is really lacking in this area. The Compiler Event Hook page doesn't have any examples (only a message to explain that examples are coming soon), and the old v1 documentation is not much better at elaborating the properties/methods available in the watching/compiler object.

Any help or guidance would be greatly appreciated.

Answer 1

For Webpack 5, since watchFileSystem.watcher.mtimes has been removed, I've changed the excellent answer by @sander to this:

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