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

问题

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.

回答1:

This kind of information is not covered by the webpack documentation and it would be difficult to include every possible option that is available on the compiler. But I would say that this is an area where you should explore the available options by either reading the source code or spinning up a debugger and investigate them. I did the latter and found that the changed files are available in:

watching.compiler.watchFileSystem.watcher.mtimes

This is an object where each key is an absolute path to a file that has been changed and the value is the timestamp when it has been changed. It is possible to have more than one file change that triggers the recompilation, when multiple changes have been saved within the configured poll interval.

The following code prints the files that have been changed (the files might also be empty):

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

An example output of this is:

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

Note: This output will come before the final stats are printed.

回答2:

The plugin I used for this in 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("====================================")
      }
    });
  }
}

回答3:

In webpack 4 you can access to watcher in that way:

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

  return Object.keys(watcher.mtimes);
}

latter in watchRun hook

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

  // ...

  return done();
});

来源：https://stackoverflow.com/questions/43140501/can-webpack-report-which-file-triggered-a-compilation-in-watch-mode