8

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

我该怎么做呢？

4

4 回答 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-loader配置.html文件，它将使用该文件而不是回退，因此嵌入将不起作用。

设置时AUTHOR它将包含作者的元标记，否则不包含。跑步：

AUTHOR='Foo Bar' webpack

将包括以下元标记：

<meta name="author" content="Foo Bar">
于 2017-03-25T18:49:17.927 回答
10 
   new HtmlWebpackPlugin({
     template: 'index.html',
     meta: {
       author: process.env.AUTHOR
     }
   });

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

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

于 2018-08-13T17:44:02.047 回答
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"
        }
    },]
}),
于 2020-07-28T05:34:25.647 回答
0

在@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="description goes here">

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

于 2021-05-23T21:54:15.240 回答