在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 “监听”该文件？

- thatismatt

---

请更清楚地解释您的要求。 - Darshan

@Darshan 很好的观点，那不太清楚，我已经更新了我的问题。希望现在你可以帮忙了。感谢你的时间 :) - thatismatt

Answer 1

我通过添加以下内容来解决这个问题：

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

我也更新了代码片段，您可以在此处查看完整的修复方法：https://gist.github.com/thatismatt/519d11b2c902791bb74b 注意：这样做可行，但有些不太正规。

- thatismatt

---

这不是黑客行为。您可以自由修改fileDependencies数组，以添加任何需要作为此编译的一部分进行监视的源。 - Gunchars

你如何理解"emit"和"fileDependencies"的含义，以及正确的组合方式？除了逐行调试之外，还有其他方法吗？我的意思是，我可以这样做，但这太无聊了。而且你往往会在过程中失去大局观。 - addlistener

@jchnxu 这篇有关插件模式的文档可能会有所帮助 https://webpack.js.org/contribute/plugin-patterns/，而“emit”编译器钩子的文档在这里: https://webpack.js.org/api/compiler-hooks/#emit - thatismatt

@thatismatt 我讨厌这个设计，因为它没有封装（你必须知道整个数据流程才能改变一点点的东西，但你仍然担心会破坏其他插件）。但是你的链接非常有用！ - addlistener