Add Dependency in Webpack Plugin

Question

Is it possible to add a dependency from within a Webpack plugin? I'm generating files that use templates, when these templates change I'd like webpack --watch to trigger another build.

Here is the plugin:

function BlahPlugin (options) { this.options = options; }

BlahPlugin.prototype.apply = function (compiler) {

  // This is the file that I'd like to "watch"
  var template = this.options.template;

  compiler.plugin('emit', function (compilation, callback) {
    var body = Object.keys(compilation.assets).join("\n");
    require("fs").readFile(template, "utf8", function (err, data) {
      var content = data.replace("{{body}}", body);
      compilation.assets["out.txt"] = {
        source: function () { return content; },
        size:   function () { return content.length; }
      };
      callback();
    });
  });
};

module.exports = BlahPlugin;

This is taken from this full working project: https://gist.github.com/thatismatt/519d11b2c902791bb74b

If you run ./node_modules/.bin/webpack --watch and modify a js file the compilation automatically triggers and produces the compiled js files and out.txt (as specified in the BlahPlugin). But if you change the tmpl.txt file, that is specified in the webpack config and used in the BlahPlugin then the compilation doesn't re-trigger. (Which is to be expected). But this is what I want to happen, how can I tell Webpack to "watch" that file?

Answer 1

I fixed this by adding the following:

compiler.plugin("emit", function (compilation, callback) {
  compilation.fileDependencies.push(path.join(compiler.context, template));
  // ...
});

I've also update the gist, so you can see the full fix there: https://gist.github.com/thatismatt/519d11b2c902791bb74b

NOTE: this works but it is a bit of a hack.