webpackのhtml-loaderを使用して、JSコード上から外部ファイル化したunderscore.jsのテンプレートファイルを読み込む際のメモ書きです。
webpackとunderscore.jsの概要及び利用方法を把握されいている方を対象に書かせていただいております。
おかしな箇所があれば、やさしくご指摘をいただけますと幸いです。

また本投稿でのテンプレートエンジンの利用はJSコード上に含めざるを得なかったHTML情報(※)を外部ファイルとして切り出すことを目的としています。
※ ajaxのコールバックで取得したデータをHTMLとして表示したい場合等
JSでWordPressの様にコンポーネント化した外部ファイル(headerとかfooter)をhtmlファイル上で呼び出したいという場合は、ejs等のテンプレートエンジンの利用をご検討いただいた方がいいかもしれません。

◆ 参考サイト
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング http://liginc.co.jp/web/html-css/html/144170

1.webpackとunderscore.jsについて

webpackについて

webpackはプロダクトで使用するJSファイルの依存関係を管理するためのツールです。またJSコード上で外部のHTML/CSSファイル等が読み込めたりと、とにかく色々できます。
webpackの概要や導入、基本的な使い方については下記のサイトを参考にして頂ければと。

◆ 参考サイト
WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】http://liginc.co.jp/web/js/other-js/148813
Webpackを使い倒す http://thujikun.github.io/blog/2014/12/07/webpack/

今回はwepbackが提供しているloaderという機能を使用して、外部ファイル化したunderscore.jsのテンプレートファイルをJSコード上で読み込んでみます。

underscore.jsについて

underscore.jsはJSのオブジェクトや配列操作等で役立つ便利メソッドを提供してくれるライブラリです。
今回はこのunderscore.jsが提供している機能の一つであるtemplateメソッドを使用してテンプレートファイルを作成します。
underscore.jsも概要については割愛させていただきますので、気になる方は下記の参考サイトをどうぞ。

◆ 参考サイト
遅すぎたUnderscore.js入門 - 全体像 http://qiita.com/hp0me/items/72d80dc166aace2759dc

また、今回使用するtemplateメソッドについても、わかりやすくまとめていただいている記事があったので、こちらにも目を通していただければと思います。

◆ 参考サイト
［Underscore.js］テンプレートとオブジェクトから文字列を生成する http://www.buildinsider.net/web/bookjslib111/101

2.テンプレートの出力

雑なサンプルコードで恐縮ですが、以下のコードではajaxで取得してきたJSONデータをhtmlとして表示するためのテンプレート作成及びその出力を行っています。
変数tmp_strに代入されているhtmlの文字列がテンプレートとなる情報になります。

※ ここではまだテンプレートの外部ファイル化は行いません。
※ 本投稿のサンプルコードはjQueryの使用を前提として記載を行っています。

hoge.js


$.ajax({
    url: 'http://hogehoge.com/huge.json',
    }).done(function(data){ //ajaxの通信に成功した場合
        // テンプレートとして出力するhtml情報
        var tmp_str = "<p> get <%= items %></p>"
        // テンプレートのコンパイル
        // 第二引数で渡しているオブジェクトはコンパイル後のテンプレートにバインドされる
        var compiled = _.template(temp_str, {items: data});

        // テンプレート情報の出力
       $(".huge").html(compiled);
    });

huge.html

// 上記のjsコードを読み込んでいるHTMLファイル

<div class='huge'></div>

ajaxのsuccessイベント発火時にHTMLファイル上のhugeクラスを持った要素にテンプレート情報が出力されます。

3.html-loader導入

続けてJSコード上で外部のhtmlファイルを読み込むために必要なhtml-loaderをインストールします。

npm install --save-dev html-loader

インストール完了後、webpackの設定ファイルにhtml-loaderの情報を記載します。
loaderを使用する際には、以下の様にmodule.exportsに代入しているオブジェクトにmoduleというプロパティを追加し、その中にloaderの情報を記載します。

webpack.config.js

module.exports = {
  entry: {
    main: 'hoge.js',
  },
  output: {
    filename: "[name].build.js"
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader' }
    ]
  }
};

4.テンプレートファイルの外部化

最後に外部化したHTMLファイル(テンプレートファイル)をhtml-loaderを使用し、JSコード上で読み込む様にしたいと思います。

まず上記2のサンプルコードでtmp_str変数に代入をしていた情報を外部のHTMLファイルとして切り出します。

_template.html

<p>get <%= items %></p>

続けてJSファイルを修正します。