logo标签列表

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

javascriptnode.jswebpackhtml-webpack-plugin
9
我使用Webpack和插件html-webpack-plugin。根据一个环境变量，我想将<meta></meta>标签注入到最终的index.html文件中。
我该如何实现？
4个回答
23
您可以定义自己的模板。在编写您自己的模板中简要介绍了这一点，您可以向其传递任何选项，并使用htmlWebpackPlugin.options在模板中使用它们：

htmlWebpackPlugin.options: 传递给插件的选项哈希。除了此插件实际使用的选项外，您还可以使用此哈希将任意数据传递到您的模板中。

例如，您可以使用环境变量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">
太好了，这正是我想要的 :) - Nicky
11
   new HtmlWebpackPlugin({
     template: 'index.html',
     meta: {
       author: process.env.AUTHOR
     }
   });

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

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

2

继@Will之后，除了名称/内容元标记外，值可以是一个对象。对象的键/值将被分配给元标记。

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

<meta key="description" content="这里输入描述">

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

（注：这是关于网页中meta标签的内容，第一个是用于搜索引擎优化的页面描述，第二个是指定网页的语言为英语美国）
2
尝试使用 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"
        }
    },]
}),
它无法加载我的图像。 - Robert Rieser
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接