2017-07-27 46 views
1

前に 'html-webpack-plugin'で定義した 'pug-html-loader'によってロードされた.pugテンプレートに変数を渡すことはできますか?html-webpack-pluginからpugテンプレートに変数を渡す

<!doctype html> 
 
<html class="no-js" lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title><%= htmlWebpackPlugin.options.title %></title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
</head> 
 
<body> 
 

 
<main> 
 
    ${ require('html-loader!../partials/' + htmlWebpackPlugin.options.file + '.html') } 
 
</main> 
 

 
</body> 
 
</html>
次のよう私が定義した layout.html

webpack.config.babel.js

... 
 

 
{ 
 
    test: /\.pug$/, 
 
    use: [ 
 
     { 
 
      loader: 'html-loader' 
 
     }, 
 
     { 
 
      loader: 'pug-html-loader', 
 
      options: { 
 
       self: true 
 
      } 
 
     }] 
 
} 
 

 

 
... 
 

 
plugins: [ 
 

 
     new HtmlWebpackPlugin({ 
 
      chunks: ['index'], 
 
      filename: 'index.html', 
 
      template: './src/templates/layout.pug', 
 
      title: 'Welcome', 
 
      file: 'index' 
 
     }), 
 

 
     new HtmlWebpackPlugin({ 
 
      chunks: ['index', 'contact'], 
 
      filename: 'contact.html', 
 
      template: './src/templates/layout.pug', 
 
      title: 'Contact us', 
 
      file: 'contact' 
 
     }), 
 

 
]

PugTemplatesとファイルで使用するためにWebpackプラグインで定義されているすべての変数を渡すためにどのように使用できますか?このアプリケーションは、いくつかの静的なページで構成される単純なWebページを作成するための簡単なプロセスであると考えられています。

答えて

0

InterpolateHtmlPluginを使用すると、HTMLファイルのTAGを置き換えることができます。

HTMLファイルhttps://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/public/index.html#L8

plugins: [ 

     // Makes some environment variables available in index.html. 
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.: 
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
     // In development, this will be an empty string. 
     new InterpolateHtmlPlugin({ 
      PUBLIC_URL: publicUrl 
     }), 
... 
} 

あなたは

const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 

あなたがここに完全な例を見ることができます NPMパッケージ-DEV-utilsの反応からプラグインをインストールすることができますウェブパックの設定https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L9https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L80-L82

package.jsonhttps://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/package.json#L55

関連する問題