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

【问题标题】：Pass variables from html-webpack-plugin to pug template将变量从 html-webpack-plugin 传递到 pug 模板
【发布时间】：2017-07-27 10:08:56
【问题描述】：

是否可以将变量传递给我之前在 'html-webpack-plugin' 中定义的 'pug-html-loader' 加载的 .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 和文件中使用？该应用程序应该是一个创建简单网页的简单过程，它由几个静态页面组成。

【问题讨论】：

标签： webpack pug-loader

【解决方案1】：

对于那些对此答案有疑问的人。解决方案是创建一个 templateGenerator

例子：

new HTMLWebpackPlugin({
   inject: true,
   templateParameters: paramGenerator(globals), // <--- Here
   template: '/mytemplate.pug',
}),

import { environment } from '../environment';

export function paramGenerator(globals: () => {[key: string]: any}) {
  return (compilation, assets, assetTags, options) => {
    return {
      compilation: compilation,
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        tags: assetTags,
        files: assets,
        options: options
      },
      environment,
      ...globals(),
    };
  }
}

globals 是一个函数，它返回一个附加到全局 pug 范围的简单对象。

【讨论】：

【解决方案2】：

您可以使用 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
        }),
...
}

您可以从 react-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 配置：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

【讨论】：

【解决方案3】：

pug-html-loader options 参数接受 data 属性，您可以在其中传递配置变量。见这里：

Pass data to pug using pug-html-loader (cannot read property of undefined)

{
  loader: 'pug-html-loader',
  options: {
    data: {
      title: 'Hello World'
    }
  }
}

【讨论】：

这会将相同的参数传递给所有模板

【解决方案4】：

我曾尝试在 HtmlWebpackPlugin 中使用templateParameters，它似乎不起作用。

但是在这里找到一个示例https://github.com/jantimon/html-webpack-plugin/tree/main/examples/template-parameters，这是一个将变量传递到 ejs 模板文件的示例

然后我在pug-html-loader得到了答案，它可以将数据传递到pug文件中，只需使用选项中的'data'属性，如下所示，我在其中添加了一个'IMG_PREFIX'。

module.exports = {
  rules: [
    loaders: [{
      include: /\.pug/,
      loader: ['pug-html-loader'],
      options: {
        data: {
          IMG_PREFIX: '/'
        }
      }
    }]
  ]
};

然后你可以在 pug 文件中接收变量并使用它

- var imgPrefix = IMG_PREFIX

div.avatar-block
    img.avatar(src=imgPrefix+'xxx.jpg')

【讨论】：

【解决方案5】：

您的代码应该可以工作。

您使用 html-loader 有什么特别的原因吗？

虽然没有什么能阻止您在应用程序中使用多个模板，或者如果它们转换得很好，甚至可以链式加载它们；我们通常使用一个模板引擎。现在，我还没有看 html-loader 源代码，但是从下面提供的链接中发布的评论来看，html-loader 不支持模板参数。它不使用它们，将其向下或向上传递给同一链中的其他加载器。

简而言之，模板参数在 html-loader 中不起作用，这可能是您遇到此问题的原因。

尝试删除 html-loader 看看是否可以解决问题。

https://github.com/jantimon/html-webpack-plugin/issues/1400

【讨论】：

请对您的回答进行详细的解释，以便下一个用户更好地理解您的回答。此外，请提供链接内容的基本介绍，以防将来停止工作。