2016-02-26 103 views
4

是否可以從Webpack插件中添加依賴關係?我生成使用模板的文件,當這些模板改變時,我想webpack --watch觸發另一個構建。在Webpack插件中添加依賴關係

這裏是插件:

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「觀看」該文件?

+0

請更清楚地說明您的要求位 – Darshan

+0

@Darshan好點,那不是很清楚,我已經更新了我的問題。希望你現在可以幫忙。感謝您的時間:) – thatismatt

回答

5

我加入這個固定如下:

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

我也更新要點,這樣你就可以看到完整的修復有:https://gist.github.com/thatismatt/519d11b2c902791bb74b

注:本作品,但它是一個有點的黑客。

+0

這不是黑客。您可以自由修改'fileDependencies'數組以添加需要作爲此編譯一部分進行觀察的所有源。 – Gunchars