Question

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

我该怎么做？

Answer 1

您可以定义自己的模板。在Writing Your Own Templates中简要提及您可以传递任何您喜欢的选项，并在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后，它会将meta标记包含在作者中，否则不包括在内。运行：

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 之后，除了名称/内容元标记之外，该值还可以是一个对象。对象的键/值将分配给元标记。

SDL_CreateWindow

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">

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

4 个答案: