html loader的作用,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}}

alt=""> 数据总览

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