如何将变量从玉器加载到玉模板文件？

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

你应该使用pug-html-loader

然后在webpack.config.js

... 
    { 
    test:/\.pug$/, 
    exclude: ['/node_modules/'], 
    loader: 'pug-html-loader', 
    query: { 
     data: {name:'test'}, 
     pretty: true 
    } 
    }, 
    ... 

然后在你的哈巴狗（玉）文件，请使用此数据

h3.title= data.name 

Answer 2

您可以通过自定义属性HtmlWebpackPlugin选项并在您的帕格模板中使用它们（参见文档中的htmlWebpackPlugin.options）。它适用于HtmlWebpackPlugin，pug-loader和webpack 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 reference。