在js插件中徘溢，需要將html以模板方式引入，并且需要解析模板推掸，本文采用的方式是html-loader+hogan.js, 對(duì)比了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對(duì)html進(jìn)行解析明郭，可實(shí)現(xiàn)對(duì)html的插值。使用html-loader的優(yōu)勢(shì)在于唯灵，在webpack中配置url-loader后贾铝，在HTML中引入圖片時(shí)可以直接使用相對(duì)路徑：<img class="co-user-img" src="./images/sjzl.png"alt="">，url-loader會(huì)直接加載./images/sjzl.png文件埠帕，不需要在index.html中使用require方式引入
補(bǔ)充：
Hogan的語(yǔ)法規(guī)則：
{{name}} 編譯的變量
{{{name}}} 不編譯的變量
{{#list}} {{/list}} 列表循環(huán)或真值判斷
{{^list}} {{/list}} 空列表或非真值判斷
{{.}} 枚舉的當(dāng)前元素
{{!}} 注釋
例：
{{#show_dashboard}}
<li class="co-user-item">
<a class="co-user-link" href="javascript:;"><img class="co-user-img" src="./images/sjzl.png"
alt=""> 數(shù)據(jù)總覽</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垢揩，并實(shí)現(xiàn)插值，但在對(duì)于圖片的處理上有所欠缺敛瓷，無(wú)法直接使用相對(duì)路徑去加載圖片叁巨，故推薦方式一
