Question

使用Handlebars-loader，我正在寻找编译然后调用模板函数，所以我可以将生成的HTML传递给其他加载器，但无论我尝试什么，似乎我只能设法获得模板函数本身。例如

    {
      test: /\.hbs$/,
      loaders: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].html'
          }
        },
        'extract-loader',
        'html-loader',
        'handlebars-loader'
      ],
      enforce: 'pre'
    },

很棒，生成HTML，通过html-loader传递它以获得webpack的优点，然后将HTML提取到它自己的文件（例如基于Webpacks html-loader文档）。但是，如果我将index.hbs运行到此，则输出到index.html是

var Handlebars = require("<dir>/node_modules/handlebars/runtime.js");
function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); }
module.exports = (Handlebars["default"] || Handlebars).template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
    var stack1;

  return ((stack1 = container.invokePartial(require("<dir>/src/pages/partials/head.hbs"),depth0,{"name":"head","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
    + "<main>\n<p>"
    + container.escapeExpression(container.lambda((depth0 != null ? depth0.formatMessage : depth0), depth0))
    + "</p>\n</main>\n"
    + ((stack1 = container.invokePartial(require("<dir>/src/pages/partials/content-info.hbs"),depth0,{"name":"content-info","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
},"usePartial":true,"useData":true});

请注意，我也使用babel-loader加载一个调用require(./index.hbs)的文件。

我想要获得的是普通的HTML文件，而不是Handlebars功能

任何有关调查方向的建议都会很棒！

Answer 1

如果我正确阅读了您的问题，则希望将handlebars-loader HTML处理与html-loader功能结合起来以检测HTML文件中的依赖项。

重点在于，把手需要在上下文中进行评估，因为它引用了外部变量。这就是为什么无法提取内容并使用文件加载器的原因；您需要呈现把手的中间加载程序或插件。

您可能需要将HBS模板文件包含在JS文件中，然后在其中进行评估，就像在Handlebars Loader examples中所做的那样，但是再次没有文件。

我认为与您想要的内容很接近的是将车把文件用作HTML Webpack Plugin的模板。您可以先使用HTML Loader，再使用Extract Loader，然后使用Handlebars Loader，但是您会将把手实体馈送到HTML Loader，我想这不是很稳定。幸运的是，有一个结合了Handlebars Template Loader（npm install --save-dev handlebars handlebars-template-loader）这三个功能的插件，您可以按以下步骤进行设置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      hash: false,
      inject: false,
      template: './src/index.hbs',
    }),
    // ...
  ],
  module: {
      {
        test: /\.hbs$/,
        use: ['handlebars-template-loader'],
      },
      // ...
    ]
  }
};

现在，HTML Webpack插件将请求HBS文件，该文件将通过Handlebars Template Loader加载，Handlebars Template Loader将解析HTML文件并检测进一步的依赖性，然后由HTML Webpack插件在上下文中呈现。

Answer 2

使用两个单独的构建配置解决了类似的问题：

First 使用 handlebars-webpack-plugin 从车把生成 html。

foreach scenario $scenario_list {
    set script {            
        set sname $scenario
        puts "Scenario: $sname"          
        set sdir "$curr_dir/$sname"
        puts "Results from: $sdir"
        extract_system_kpis $sname "SUCCESS" $sdir $hw_instance_list $hbm_scheduler_pairs
    }
    set chan [open |[list [info nameofexecutable] <<$script 2>@stderr]] 
    dict set res $chan command $script
    fconfigure $chan -blocking 0
    lappend background $chan
}

while 1 {
    foreach chan $background {
        if {[eof $chan]} {
            fconfigure $chan -blocking 1
            if {[set idx [lsearch -exact $background $chan]] >= 0} {
                set background [lreplace $background $idx $idx]
            }
            catch [close $chan] cres copts
            dict set res $chan result $cres
            dict set res $chan options $copts
        } else {
            puts -nonewline [read $chan]
        }
    }
    if {[llength $background] == 0} {
        break
    }
    after 100
}
return $res

Second 在第一个的输出上使用 html-loader。

new HandlebarsPlugin({
    // path to hbs entry file(s). Also supports nested directories if write path.join(process.cwd(), "app", "src", "**", "*.hbs"),
    entry: path.join(process.cwd(), "handlebars", "*.hbs"),
    // output path and filename(s). This should lie within the webpacks output-folder
    // if ommited, the input filepath stripped of its extension will be used
    output: path.join(process.cwd(), "html", "[name].html"),
    // you can also add a [path] variable, which will emit the files with their relative path, like
    // output: path.join(process.cwd(), "build", [path], "[name].html"),

    // globbed path to partials, where folder/filename is unique
    partials: [
        path.join(process.cwd(), "handlebars", "partials", "**", "*.hbs")
    ],
})

在使用把手构建期间生成HTML的方法

2 个答案: