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 (piler) {

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

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

module.exports = BlahPlugin;

This is taken from this full working project:

If you run ./node_modules/.bin/webpack --watch and modify a js file the pilation automatically triggers and produces the piled 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 pilation 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?

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 (piler) {

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

  piler.plugin('emit', function (pilation, callback) {
    var body = Object.keys(pilation.assets).join("\n");
    require("fs").readFile(template, "utf8", function (err, data) {
      var content = data.replace("{{body}}", body);
      pilation.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./thatismatt/519d11b2c902791bb74b

If you run ./node_modules/.bin/webpack --watch and modify a js file the pilation automatically triggers and produces the piled 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 pilation 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?

• javascript
• webpack

• explain your requirement bit more clearly please – Darshan Commented Feb 26, 2016 at 17:14
• @Darshan Good point, that wasn't very clear, I have updated my question. Hope you can help now. Thanks for your time :) – thatismatt Commented Feb 26, 2016 at 20:12

1 Answer 1

I fixed this by adding the following:

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

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

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