在Webpack插件中添加依赖项

时间:2016-02-26 16:37:48

标签: javascript webpack

是否可以在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中所指定)。但是如果你改变了tmpl.txt文件,那是在webpack配置中指定并在BlahPlugin中使用的,那么编译就不会重新触发。 (这是预期的)。但这就是我想要发生的事情,我如何告诉Webpack“观察”该文件?

1 个答案:

答案 0 :(得分:5)

我通过添加以下内容来修复此问题:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"
    android:background="@color/primaryColor"
    app:theme="@style/MyCustomToolBarTheme"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>

我还更新了要点,因此您可以在那里看到完整的解决方法:https://gist.github.com/thatismatt/519d11b2c902791bb74b

注意:这有效,但它有点像黑客。