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?

@Darshan Good point, that wasn't very clear, I have updated my question. Hope you can help now. Thanks for your time :) — thatismatt
– thatismatt, Commented Feb 26, 2016 at 20:12

thatismatt · Accepted Answer · 2016-03-01 11:30:09Z

8

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.

answered Mar 1, 2016 at 11:30

thatismatt

9,85210 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gunchars Over a year ago

This isn't a hack. You're free to modify the fileDependencies array to add any sources that need to be watched as part of this compilation.

addlistener Over a year ago

How do you figure out the meaning of "emit" and "fileDependencies", and the right way to put them together? Are there ways other than debugging line by line? I mean I could do this, but it's way too boring. And you tend to lose the big picture along the way.

thatismatt Over a year ago

@jchnxu This document on plugin patterns may help webpack.js.org/contribute/plugin-patterns and the "emit" compiler hook is documented here: webpack.js.org/api/compiler-hooks/#emit

addlistener Over a year ago

@thatismatt I hate the design because there're no encapsulation(You have to know the entire data flow to change just a little bit of s***, still you are worried about breaking other plugins). But your links are very useful!

Collectives™ on Stack Overflow

Add Dependency in Webpack Plugin

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related