使用 Webpack 加载 Mustache 模板

Posted 2023-02-22

【中文标题】使用 Webpack 加载 Mustache 模板

【英文标题】：Loading Mustache Templates with Webpack

【发布时间】：2015-04-07 04:25:12

【问题描述】：

我和我的团队目前正在将一个相当大的项目从 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 个监视脚本。我查看了loaders，但这些似乎是 1 对 1 源文件 -> 输出文件与多对 1，这是我们当前解决方案的优点。

谢谢！

【参考方案1】：

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