HTMLWebpackPlugin

関連

HTMLWebpackPlugin を使うとコンパイル時に、生成された JavaScript ファイルなどが読み込まれている状態の.htmlファイルが作れます。

インストール

以下でインストールします。

yarn add -D html-webpack-plugin

使い方

一番簡単な使い方は、ただ作成したインスタンスをplugins配列の 1 つとして渡すだけです。例えば以下のような設定があるとします。

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = () => {
  return {
    mode: 'development',
    target: 'web',
    entry: {
      main: path.join(__dirname, 'index.js')
    },
    output: {
      path: path.join(__dirname, 'out'),
      filename: '[name].js'
    },
    plugins: [
      new HTMLWebpackPlugin(),
    }
  }
}

これを元にwebpackコマンドでビルドした時、output.path内のディレクトリにindex.htmlが作られます。またその.htmlファイルは[name].js、つまりmain.jsが読み込まれる記載のある状態で作られます。

インスタンスを作る際にはいくらか渡せるオプションがあります。

HTML ファイル名を変える

デフォルトではindex.htmlですが、これを変更したい場合はfilenameオプションを設定します。
以下のようなインスタンスを渡すと、先程のindex.htmlがdefault.htmlという名前で作られるようになります。

new HTMLWebpackPlugin({
  filename: 'default.html`
})

タイトルを変える

titleを設定することで、<title>タグの中身を好きなテキストに変更できます。
以下のようにすると<title>nju33<</title>という形で出力されます。

new HTMLWebpackPlugin({
  filename: 'nju33.html',
  title: 'nju33'
})

HTML マークアップを変える

templateにテンプレートにしたいファイルへの絶対パスを指定すると、そのファイルを元に.htmlファイルを作れます。
例えば以下はtemplate.htmlをテンプレートに指定している例です。

new HTMLWebpackPlugin({
  template: path.join(__dirname, 'template.html'),
  filename: 'template.html',
  title: 'template'
})

template.htmlはこのようになっています。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
</body>

</html>

このテンプレートファイルでは<%= ... %>により値が展開できます。またインスタンスのオプションがそのままhtmlWebpackPlugin.optionsに入っているので、上記ではtitleを<title>タグの中に展開されるようなテンプレートになってます。

これをビルドすると<title>template</title>という形の HTML ファイルが作成されます。

ちなみに JavaScript ファイルは自動的に<body>タグの中に展開される為問題ないです。

JavaScript でテンプレートを作る

templateの代わりに、templateContentを使うこともできます。こちらに指定した関数の戻り値が.htmlファイルで出力されます。

この関数は第一引数のオブジェクトから HTML テンプレートのようにhtmlWebpackPluginのインスタンスが受け取れる為、それを使い自由にマークアップできます。
例えば以下のようにすると HTML テンプレートと同じマークアップを得られます。

new HTMLWebpackPlugin({
  templateContent: ({ htmlWebpackPlugin }) => {
    return `




  
  ${htmlWebpackPlugin.options.title}






    `
  },
  filename: 'template-content.html',
  title: 'template-content'
})

これをビルドすると<title>template-content</title>という形の HTML ファイルが作成されます。

例

HTMLWebpackPlugin nju33-com/example-html-webpack-plugin をクローンすると上記をてっとり速く確認することができます。

その際は以下のコマンドを実行してください。

yarn
yarn dev
open http://localhost:33948/