webpack引入handlebars報錯'You must pass a string or Handlebars AST to Handlebars.compile'

背景: webpack作為一個部分替代打包工具和模塊化工具的優秀選擇出現,作為嘗試,也為了構建自己習慣的前端開發方式,我嘗試了將webpack和自己常用handlebars模板引擎結合.整體項目背景為: koa + webpack + handlebars + jquery 這樣的結構.

嘗試: 使用sixstone腳手架生成的項目結構;在靜態資源目錄public下放置webpack.config.js以及核心js文件及模板tpl/xx.hbs;在運行webpack --progress --colors --watch后引入的js文件會一直報錯.

報錯信息:

"You must pass a string or Handlebars AST to Handlebars.compile. You passed function ret(context) {↵ var options ……

錯誤分析:

Handlebars.compile方法插入的參數是一個function而不是string,(打印出的結果);var addUserTpl = require('../tpl/add-user.hbs');猜測可能是把需要返回的字符串放到了一個方法里.

解決方案:

var addUserTpl = require('../tpl/add-user.hbs');
替換為

var addUserTpl = require('../tpl/add-user.hbs')();

驗證想法: 打開build后的結果.

雖然不明白具體實現,但很明顯的看到一個module.exprots = function(){return 'xx' };

標准:
當然，以上在webpack中引入handlebars是不標准的，更為標准的參見

這里

;webpack已經將 Handlbars.compile()方法引入，無需要我們再次寫入這個方法.