HtmlWebpackPlugin ejs

HtmlWebpackPluginでejsを使う。

webpackではtemplateにhtmlファイルを指定できるが、そのhtmlをモジュール化したかった。（とりあえず暫定。。）

まずwebpackではtemplateにhtml以外のファイルを使うことが出来る。

参考:

new HtmlWebpackPlugin({
      template: 'index.ejs',
    }),

ejsというテンプレート言語が使えるなら、ほかのHTML呼び出せるだろうし、コレでいいかな、と思ったが、HtmlWebpackPluginデフォのejsローダーでは、include（別ejsファイルを呼び出す構文）が使えないっぽい？

巡った結果、どうやらejsをコンパイル->レンダリングして、HTMLにしてしまうローダーをHtmlWebpackPluginに渡せばいいようだ。

参考:

なので、ejs-loaderでもなく、ejs-compileでもなく、ejs-render-loaderをインストールして、

npm install --save-dev ejs-render-loader

HtmlWebpackPluginの設定のところでコマンドで呼び出す。このページの(2)の方法。

new HtmlWebpackPlugin({
      inject: true,
      template: 'ejs-render!' + paths.template,
      filename: 'index.html'
    }),

ejs内で外部変数を使いたい場合は、ここで渡すことも出来る。?と!ではさむようにする。

new HtmlWebpackPlugin({
      inject: true,
      template: 'ejs-render?optionName=Hello!' + paths.template,
      filename: 'index.html'
    }),

上記の設定ではejs内で、optionName == "Hello"　として使える。

<%= optionName %>

といったわけで、ejsを使ってHTMLを分割して管理することができた。

  <% if(option === "a") { %>
    <%- include template/a -%>
  <% } else if (option === "b") { %>
    <%- include template/b -%>
  <% } %>