web-dev-qa-db-ja.com

html-webpack-pluginにカスタムメタタグを挿入する方法は？

プラグインhtml-webpack-pluginと一緒にWebpackを使用しています。環境変数に基づいて、<meta></meta>タグを最終的なindex.htmlファイルに挿入したいと思います。

どうすればよいですか？

javascriptnode.jswebpackhtml-webpack-plugin
6
Nicky

独自のテンプレートを定義できます。 独自のテンプレートの作成 で簡単に説明されているように、任意のオプションを渡して、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">
19
Michael Jungo
   new HtmlWebpackPlugin({
     template: 'index.html',
     meta: {
       author: process.env.AUTHOR
     }
   });

その結果、ヘッドタグ内に次のものが含まれます。

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

1
Will