如何将变量从 jade-loader 传递到 jade 模板文件？

Question

我想将我的数据对象传递给玉文件，但这是不可能的我的jade-loader：

{
   test: /\.jade$/,
   loader: "jade",
   query: {
      pretty: true,
      locals: {
          name: "Georg"
    }
}

}

plugins：

plugins: [
    new HtmlWebpackPlugin({
       filename: "index.html",
       template: "./src/jade/index.jade"
})]

index.jade：

span=locals.name

我运行 webpack 并得到这个index.html：

<span></span>

我的变量name没有通过。为什么？如何解决？

Answer 1

您可以将自定义属性传递给HtmlWebpackPlugin选项并在 pug 模板中使用它们（请参阅文档中的htmlWebpackPlugin.options）。它适用于最新版本的HtmlWebpackPlugin和pug-loaderwebpack 2。无法确认它是否适用于以前的版本，但我相信它可以。

pug规则：

{
  test: /\.pug$/,
  loader: 'pug-loader',
  options: {
    // Use `self` namespace to hold the locals
    // Not really necessary
    self: true,
  },
}

HtmlWebpackPlugin选项：

{
  filename: 'index.html',
  template: 'src/html/index.pug',

  // Your custom variables:
  name: 'Georg',
}

在模板中使用它index.pug：

span= self.htmlWebpackPlugin.options.name

请注意，您可以直接使用变量在哈巴狗模板中设置该self选项并省略它。false有关更多详细信息，请参阅Pug 参考资料。