html-loader 插值

在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中引入图片时可以直接使用相对路径：，url-loader会直接加载./images/sjzl.png文件，不需要在index.html中使用require方式引入

补充：
Hogan的语法规则：
{{name}} 编译的变量
{{{name}}} 不编译的变量
{{#list}} {{/list}} 列表循环或真值判断
{{^list}} {{/list}} 空列表或非真值判断
{{.}} 枚举的当前元素
{{!}} 注释
例：

{{#show_dashboard}}

     数据总览
{{/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，并实现插值，但在对于图片的处理上有所欠缺，无法直接使用相对路径去加载图片，故推荐方式一