将变量从html-webpack-plugin传递到pug模板

是否可以将一个变量传递给我在'html-webpack-plugin'中定义的'pug-html-loader'加载的.pug模板？将变量从html-webpack-plugin传递到pug模板

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' 
 
     }), 
 

 
]

在的layout.html我已经定义如下：

<!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>

如何使用它来传递所有变量 - 在Webpack插件中为我的PugTemplates和文件中的用法定义？该应用程序应该是一个简单的过程来创建简单的网页，其中包含几个静态页面。

来源

2017-07-27 Sascha

您可以使用InterpolateHtmlPlugin从HTML文件中替换TAG。

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 
     }), 
... 
}

您可以从安装插件反应-DEV-utils的 NPM包

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

你可以看到完整的例子在这里：

HTML文件：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/public/index.html#L8

webpack config：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L9和https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L80-L82

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

来源

2017-07-27 10:44:35

将变量从html-webpack-plugin传递到pug模板

回答

相关问题