javascript - Add Dependency in Webpack Plugin - Stack Overflow

admin管理员组

文章数量:1355014

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

Share Improve this question Follow edited Feb 26, 2016 at 20:11 thatismatt asked Feb 26, 2016 at 16:37 thatismattthatismatt 9,8521010 gold badges4444 silver badges5656 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptAdd Dependency in Webpack PluginStack Overflow