如何通过 web pack 加载一系列车把模板？

Question

有没有办法编译模板目录并使用Webpack存储在数组对象中？

说明：我现在正在使用车把模板列表。我在gulp 中使用handlebars compiler 预编译模板列表。

gulp.src('client/src/templates/**/*.hbs')
  .pipe(gulp_handlebars({
      handlebars: handlebars,
       compilerOptions:{
        knownHelpers: helpers,
        knownHelpersOnly:true}
      }))
      .pipe(wrap('Handlebars.template(<%= contents %>)'))
      .pipe(declare({
        namespace: 'appname.templates',
        noRedeclare: true, 
        processName: function(filePath) {
          return declare.processNameByPath(filePath.replace('client/src/templates/', ''));
        }
      }));

然后我将通过appname.templates 数组访问模板。它工作正常。

现在，我正在转向 Webpack。如果我使用 handlebars-loader ， 它允许我按名称要求每个模板，例如

var template = require("./file.handlebars");

有没有办法将一个目录中的所有模板作为数组获取，例如

var templates = require("./*.handlebars");

Answer 1

我通常会转到您有模板的文件夹并有一个templates/index.js 文件，例如：

export templateA from './templateA.handlebars'
export templateB from './templateB.handlebars'
export templateC from './templateC.handlebars'
...

那么你可以这样做：

import * as templates from './templates'

templates 是一个包含所有模板的对象。您也可以通过templates.templateA 按名称访问它们。