在js插件中，需要将html以模板方式引入，并且需要解析模板，本文采用的方式是html-loader+hogan.js, 对比了mustache-loader做比较分析
方式一：
安装html-loader及hogan.js：
npm install -D html-loader
npm install -D hogan.js
webpack配置如下：
{
test: /\.html$/i,
loader: 'html-loader',
options: {
minimize: true
}
}
在js中分别引入：
import bellTmpl from './index.html';
var Hogan = require('hogan.js');
var compiledTemplate = Hogan.compile(bellTmpl);
document.getElementById('app').innerHTML = compiledTemplate.render({
web_path: ENV.web_path,
access_token: access_token,
show_dashboard:false
});
利用html-loader引入html后，使用Hogan对html进行解析，可实现对html的插值。使用html-loader的优势在于，在webpack中配置url-loader后，在HTML中引入图片时可以直接使用相对路径：<img class="co-user-img" src="./images/sjzl.png"alt="">，url-loader会直接加载./images/sjzl.png文件，不需要在index.html中使用require方式引入
补充：
Hogan的语法规则：
{{name}} 编译的变量
{{{name}}} 不编译的变量
{{#list}} {{/list}} 列表循环或真值判断
{{^list}} {{/list}} 空列表或非真值判断
{{.}} 枚举的当前元素
{{!}} 注释
例：
{{#show_dashboard}}
<li class="co-user-item">
<a class="co-user-link" href="javascript:;"><img class="co-user-img" src="./images/sjzl.png"
alt=""> 数据总览</a></li>
{{/show_dashboard}}
方式二：
安装mustache-loader
npm install -D mustache-loader
在webpack中配置：
{
test: /\.html$/i,
loader: 'mustache-loader'
}
在js中使用：
var bellTmpl = require('./index.html');
var html = bellTmpl({
web_path: ENV.web_path,
access_token: access_token
});
document.getElementById('app').innerHTML = html;
mustache-loader虽然可以引入html，并实现插值，但在对于图片的处理上有所欠缺，无法直接使用相对路径去加载图片，故推荐方式一
