使用Webpack加载Mustache模板

Question

我和我的团队目前正在将一个相当大的项目从AMD + RequireJS迁移到CommonJS + Webpack.我们喜欢Webpack提供的工具,并认为CommonJS是社区的发展方向:跳跃你可以说的潮流.

什么是利用webpack自动加载和捆绑我们的.mustache模板文件的有效方法？目前我们有一个监视脚本,它使用xport将项目文件夹中的所有.mustache文件捆绑到一个js文件中,格式如下:

var files = {};
files['path/to/file'] = '<div>{{content}}</div>';
files['path/to/other/file'] = '<span>{{stuff}}</span>';
...

我们可以完全继续使用这个... 我们当前的解决方案特别方便的是,当我们制作新模板时,我们不必专门参考项目中的模板.因为脚本只是在观察文件夹,所以字典会更新,我们可以使用另一个库来获取字符串并使其成为可用的模板函数.

什么是目标呢？ 我很好奇是否有办法从我们文件夹中的模板 - >我们可以在代码中使用的函数,而无需特别要求文件进入项目.我们当前的解决方案超出了webpack(除非当然有一种方法可以挂钩)这很烦人,因为我们不需要2个监视脚本.我查看了加载器,但这些似乎是1对1的源文件 - >输出文件与多对1,这对我们当前的解决方案来说是很好的.

谢谢!

Answer 1

我认为您可以在require.context之上构建适合您需求的东西。将其指向您的模板目录，它将为您提供一个 API 来访问其中的模板。您可以将此方法与Mustache-loader结合起来。