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 

나는 웹팩을 실행하고 나는이 index.html를 얻을 :

이

<span></span> 

내 name 변수를 전달하지 않습니다. 왜? 그것을 고치는 방법?

Answer 1

당신은

h3.title= data.name 

Answer 2

당신은 HtmlWebpackPlugin 옵션에 사용자 지정 속성을 전달할 수 있습니다이 데이터를 사용하여, webpack.config.js 당신의 흙에서 다음

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

(옥) 파일에서 다음 pug-html-loader

사용해야합니다 퍼그 템플릿에서 사용하십시오 (문서의 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 템플릿을 사용 : 당신이 false에 self 옵션을 설정하고이를 생략 할 수

span= self.htmlWebpackPlugin.options.name 

주 ...에서 변수를 직접 사용하여 귀하의 퍼그 템플릿. 자세한 내용은 Pug reference을 참조하십시오.