javascript - Menambahkan Dependensi di Plugin Webpack


Apakah mungkin menambahkan dependensi dari dalam plugin Webpack? Saya sedang menghasilkan file yang menggunakan template, ketika template ini berubah saya ingin webpack --watch memicu build lain.

Berikut adalah 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;

Ini diambil dari proyek kerja penuh ini: https://gist.github.com/thatismatt/519d11b2c902791bb74b

Jika Anda menjalankan ./node_modules/.bin/webpack --watch dan memodifikasi file js, kompilasi akan otomatis berjalan dan menghasilkan file js yang dikompilasi dan out.txt (seperti yang ditentukan di BlahPlugin). Namun jika Anda mengubah file tmpl.txt, yang ditentukan dalam konfigurasi webpack dan digunakan di BlahPlugin, maka kompilasi tidak akan dijalankan kembali. (Ini memang yang diharapkan). Tapi inilah yang ingin saya terjadi, bagaimana saya bisa memberitahu Webpack untuk 'mengawasi' file itu?

Jawaban #1

Saya memperbaikinya dengan menambahkan berikut ini:

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

Saya juga telah memperbarui gist, jadi Anda bisa melihat perbaikan lengkapnya di sana: https://gist.github.com/thatismatt/519d11b2c902791bb74b

CATATAN: ini berfungsi tetapi ini agak seperti trik.