【发布时间】：2020-01-06 18:50:28
【问题描述】：
我是新来的车把，我想知道 webpack 中车把的加载器到底在做什么，因为在 npm 车把网站上没有什么可以读到的……它是否只将模板预编译成 .js 文件?如果是这样，它会在哪里输出那些预编译的 .js 文件？ （我假设它只有 1 个文件，其中包含不同的 Handlebars.template.x 函数...）。
【问题讨论】：
标签： javascript webpack handlebars.js
【发布时间】：2020-01-06 18:50:28
【问题描述】：
它会预编译它们，是的。预编译好的函数不会输出到单独的文件中，而是在内部提供给 Webpack，Webpack 会为你打包。 handlebars-loader documentation 提到了这一点，虽然简短：
var template = require("./file.handlebars");
// => returns file.handlebars content as a template function
每个模板都被编译成一个单独的函数，而不是拥有一个具有不同 Handlebars.template.TemplateName 函数的对象，当您执行 require('./the-file-name.handlebars') 时，您只能获得 one 特定模板的函数。
【讨论】：
-
好的，非常感谢，我只是在引用该预编译的 .js 文件时遇到了问题，我是否像您使用相对路径'./filename.handlebars' 那样引用它，所以它可以在全球范围内使用吗？在我的项目中说？我只需要像这样导入它们，webpack 就知道它们在哪里？还是我需要一些不同的方法？
-
澄清一下：
'the-file-name.handlebars'是什么？这仍然是我的车把模板文件，还是真的是我模板中预编译的 javascript 文件？后缀 .handlebars 让我感到困惑，我在那里需要什么？我可以这样做吗，例如：let template = require('./myTemplate.handlebars');然后document.getElementById('output').innerHTML = template({some_Value})？ -
您需要您的车把源文件，您无需手动进行任何编译。每个车把模板将位于其自己的单独文件中，文件扩展名为
.handlebars（我认为 .hbs 也很常见，您可以使用加载器规则中的test选项将 webpack 配置为接受）。 -
我这样做了，我在我的其他一些 .js 文件中需要我的 .hbs 文件......但我不明白......当我需要 .hbs 模板文件时，它们不是尚未预编译，但是当 webpack 执行时，它会采用这些 .hbs 模板并将它们预编译为 .js 文件，并在每个 .hbs 文件的单独输出文件中...文件或它是如何工作的？因为否则，如果我不在我的任何文件中使用这些 .js，那么预编译它们有什么意义？或者 webpack 是否以某种方式在幕后自动执行此操作？
-
Webpack 在幕后施展魔法。当您执行
require('./file.hbs')时，webpack 会调用 handlebars-loader，它会编译模板，然后 webpack 会为您提供预编译的模板而不是模板源代码。预编译的模板不会输出到单独的文件，而是捆绑在而不是模板源代码中。所以，你require()车把源文件，但你得到预编译模板。