Webpack 将变量从html网页包插件传递到pug模板

是否可以将一个变量传递给我之前在“html网页包插件”中定义的“pug html加载程序”加载的.pug模板

webpack.config.babel.js

。。。
{
测试：/\.pug$/,，
使用：[
{
加载器：“html加载器”
},
{
加载器：“帕格html加载器”，
选项：{
赛尔夫：没错
}
}]
}
...
插件：[
新HtmlWebpackPlugin({
块：['index']，
文件名：“index.html”，
模板：'./src/templates/layout.pug'，
标题:"欢迎",，
文件：“索引”
}),
新HtmlWebpackPlugin({
区块：['index'，'contact']，
文件名：“contact.html”，
模板：'./src/templates/layout.pug'，
标题：“联系我们”，
文件：“联系人”
}),
]

您可以使用InterpoleHtmlPlugin替换HTML文件中的标记

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

您可以在这里看到完整的示例：

HTML文件：

网页包配置：和

---

package.json：

pug html loader

选项

参数接受一个

数据

属性，您可以在其中传递配置变量。请看这里：

---

对于那些对这个答案有困难的人。解决方案是创建一个templateGenerator

例如：

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

---

其中，

globals

是一个返回附加到全局pug作用域的简单对象的函数。

我曾尝试在HtmlWebpackPlugin上使用

templateParameters

，它似乎不起作用

但是在这里找到一个示例，这是一个将变量传递到ejs模板文件的示例

然后我在得到答案，它可以将数据传递到pug文件中，只需在选项中使用“data”属性，如下面所示，我在其中添加了一个“IMG_前缀”

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

然后您可以在pug文件中接收变量并使用它 -var imgPrefix=IMG\u前缀

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

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(),
    };
  }
}

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

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