javascript - Legg til avhengighet i Webpack-plugin


Er det mulig å legge til en avhengighet fra innenfor en Webpack-plugin? Jeg genererer filer som bruker maler, og når disse malene endres, vil jeg at webpack --watch skal utløse en ny bygging.

Her er pluginen:

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;

Dette er hentet fra dette fullstendige fungerende prosjektet: https://gist.github.com/thatismatt/519d11b2c902791bb74b

Hvis du kjører ./node_modules/.bin/webpack --watch og endrer en js-fil, utløses kompileringen automatisk og produserer de kompilert js-filene og out.txt (som spesifisert i BlahPlugin). Men hvis du endrer tmpl.txt-filen, som er spesifisert i webpack-konfigurasjonen og brukt i BlahPlugin, så utløses ikke kompileringen på nytt. (Noe som er å forventet). Men dette er det jeg vil skal skje, hvordan kan jeg få Webpack til å «overvåke» den filen?

Svar #1

Jeg løste dette ved å legge til følgende:

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

Jeg har også oppdatert gist, så du kan se hele rettelsen der: https://gist.github.com/thatismatt/519d11b2c902791bb74b

MERK: dette fungerer, men det er litt av en nødløsning.