CODEWITHSUNDEEP
javascriptnode.jswebpackhtml-webpack-plugin
Nicky
Nicky

Reputation: 3817

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

I use Webpack along with the plugin html-webpack-plugin. Based on an environment variable, I want to inject a <meta></meta> tag into the final index.html file.

How do I do this?

Upvotes: 9

Views: 17379

Answers (4)

Jim Lowrey
Jim Lowrey

Reputation: 109

Following on @Will, in addition to name/content meta tags the value can be an object. The key/values of the object will be assigned to the meta tag.

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

Upvotes: 2

redexp
redexp

Reputation: 5065

Try 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"
        }
    },]
}),

Upvotes: 2

Will
Will

Reputation: 544

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

resulting in the inclusion of the following within your head tag.

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

Upvotes: 11

Michael Jungo
Michael Jungo

Reputation: 32982

You can define your own template. It's briefly mentioned in Writing Your Own Templates that you can pass any options you'd like to it and use them in the template with 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.

For example you could define the author with the environment variable AUTHOR and add an author option to the plugin:

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

In your template.ejs you can create a <meta> tag with that information:

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

You could use a .html file instead and the plugin will fallback to ejs-loader, but if you have html-loader configured for .html files, it will use that instead of the fallback, so the embedding won't work.

When AUTHOR is set it will include the meta tag with the author, otherwise it's not included. Running:

AUTHOR='Foo Bar' webpack

will include the following meta tag:

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

Upvotes: 23

Related Questions