如何在 html-webpack-plugin 中注入自定义元标签？

Question

我将 Webpack 与插件一起使用 html-webpack-plugin。基于一个环境变量，我想在最终的 index.html 文件中注入一个 <meta></meta> 标签。

我该怎么做？

Answer 1

您可以定义自己的模板。 Writing Your Own Templates 中简要提到，您可以将任何您想要的选项传递给它，并在模板中使用它们 htmlWebpackPlugin.options:

htmlWebpackPlugin.options: the options hash that was passed to the plugin. In addition to the options actually used by this plugin, you can use this hash to pass arbitrary data through to your template.

例如，您可以使用环境变量 AUTHOR 定义作者并向插件添加 author 选项：

new HtmlWebpackPlugin({
  template: 'template.ejs',
  author: process.env.AUTHOR
})

在您的 template.ejs 中，您可以使用该信息创建一个 <meta> 标签：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <% if (htmlWebpackPlugin.options.author) { %>
    <meta name="author" content="<%= htmlWebpackPlugin.options.author %>">
    <% } %>
  </head>
  <body>
  </body>
</html>

您可以改用 .html 文件，插件将回退到 ejs-loader，但如果您为 .html 文件配置了 html-loader，它将使用那个而不是回退，所以嵌入将不起作用。

当设置 AUTHOR 时，它将包含作者的元标记，否则不包含。运行:

AUTHOR='Foo Bar' webpack

将包含以下元标记：

<meta name="author" content="Foo Bar">

Answer 2

   new HtmlWebpackPlugin({
     template: 'index.html',
     meta: {
       author: process.env.AUTHOR
     }
   });

导致在您的 head 标签中包含以下内容。

<meta name="author" content="Foo Bar">

Answer 3

尝试html-webpack-tags-plugin

new HtmlWebpackTagsPlugin({
    metas: [{
        path: 'img/logo.png',
        attributes: {
            property: 'og:image'
        }
    },{
        attributes: {
            property: 'og:image:type',
            content: "image/png"
        }
    },{
        attributes: {
            property: 'og:image:width',
            content: "200"
        }
    },{
        attributes: {
            property: 'og:image:height',
            content: "200"
        }
    },]
}),

Answer 4

在@Will 之后，除了 name/content 元标记之外，值还可以是一个对象。对象的 key/values 将分配给元标记。

new HtmlWebpackPlugin({
    template: 'index.html',
    meta: {
        someName: {
            httpEquiv: 'Content-Language',
            content: 'en_US'
        },
        anotherName: { 
            key: 'description',
            content: 'description goes here'
        }
    }
})

<meta key="description" content="description goes here">

<meta httpEquiv="Content-Language" content="en_US">

如何在 html-webpack-plugin 中注入自定义元标签？

How to inject custom meta tags in html-webpack-plugin?

javascript

node.js

webpack

html-webpack-plugin