javascript - 在 Webpack 插件中添加依赖

Question

是否可以从 Webpack 插件中添加依赖项？我正在生成使用模板的文件，当这些模板发生变化时，我希望 webpack --watch 触发另一个构建。

这是插件:

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;

这取自这个完整的工作项目:https://gist.github.com/thatismatt/519d11b2c902791bb74b

如果您运行 ./node_modules/.bin/webpack --watch 并修改 js 文件，编译会自动触发并生成已编译的 js 文件和 out.txt(如 BlahPlugin 中指定的那样) .但是，如果您更改在 webpack 配置中指定并在 BlahPlugin 中使用的 tmpl.txt 文件，则编译不会重新触发。 (这是可以预料的)。但这是我想要发生的事情，我如何告诉 Webpack “观察”那个文件？

Answer 1

我通过添加以下内容解决了这个问题:

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

我还更新了要点，所以你可以在那里看到完整的修复:https://gist.github.com/thatismatt/519d11b2c902791bb74b

注意:这是有效的，但有点 hack。