HtmlWebpackPlugin ejs

webpackEjsTemplate.md

HtmlWebpackPluginでejsを使う。

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

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

参考:

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

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

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

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

別のローダーを呼び出す必要がある。 html-webpack-plugin/template-option.md at master · jantimon/html-webpack-plugin

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

参考:

webpack html (ejs) include other templates - Stack Overflow

webpackでejsを使い、共通要素をインクルードして効率的にやりたいよね。 | shigeki.takeguchi.log

結果

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

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 -%>
  <% } %>