初识前端模板概念的开发者，通常都使用过underscore的template方法，非常简单好用，支持赋值，条件判断，循环等，基本可以满足我们的需求。
在使用Webpack搭建开发环境的时候，如果要使用underscore的template方法进行前端模板的渲染，我们可以把模板代码独立到模版文件中保存。如何将模板文件加载到我们的JavaScript中进行模板渲染，就成了我们首先需要解决的问题。
说道这里，就必须提到Webpack中的loader（加载器）的概念，webpack支持通过loader的方式转换应用程序的资源文件，而我们的模板文件也需要对应的loader去进行加载，才能支持我们开发。
segmentfault中leftstick讲到目前可以支持template加载的有raw-loader，html-loader，template-html-loader，ejs-loader。。。。。。【更多的列表参考templating】
不同的加载器略有不同，表现在加载完之后，在JS代码中的表现，有的是返回字符串，有的则是JS对象或方法。
我们尝试使用raw-loader来处理，raw-loader的官方解释是【将文件加载为字符串】，因此我们可以将模板文件加载成字符串，然后使用underscore去渲染成最终的HTML。
我们使用一下配置简单构建一个webpack的环境。
package.json
{
"name": "tpl-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"raw-loader": "^0.5.1",
"underscore": "^1.8.3",
"webpack": "^3.0.0"
}
}
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.tpl$/,
use: 'raw-loader'
}
]
},
plugins: [new HtmlWebpackPlugin()]
};模板代码 index.tpl
<% _.each(data, function(n){ %>
<p>姓名：<%= n.name %>,年龄：<%= n.age %>,性别：<%= n.sex %></p>
<% }); %>index.js
1 var _ = require('underscore');
2
3 // 这里可以看到indexTplFile只是字符串
4 var indexTplStr = require('./index.tpl');
5 // template方法将其封装成一个方法
6 var indexTpl = _.template(indexTplStr);
7
8 var data = [
9 {
10 name: 'mike',
11 age: 18,
12 sex: '男'
13 },
14 {
15 name: 'nina',
16 age: 20,
17 sex: '女'
18 },
19 {
20 name: 'elle',
21 age: 26,
22 sex: '女'
23 }
24 ];
25
26 document.body.innerHTML = indexTpl({data:data});
运行npm install 之后，运行webpack，打开index.html，就可以看到如下结果。
姓名：mike,年龄：18,性别：男
姓名：nina,年龄：20,性别：女
姓名：elle,年龄：26,性别：女但是可以看得出来，在渲染模板的过程中，执行了三行代码，如果我们想只用一行代码就生成最终的HTML字符串，继续尝试ejs-loader 。
webpack.config.js
1 var webpack = require('webpack');
2 var HtmlWebpackPlugin = require('html-webpack-plugin');
3 module.exports = {
4 entry: './index.js',
5 output: {
6 filename: 'bundle.js'
7 },
8 module: {
9 loaders:[
10 {
11 test: /\.tpl$/,
12 loader: 'ejs-loader?variable=data'
13 },
14 ]
15 },
16 plugins: [
17 new HtmlWebpackPlugin(),
18 // 提供全局变量_
19 new webpack.ProvidePlugin({
20 _: "underscore"
21 })
22 ]
23 };在代码中使用也变得非常简单，require对应的tpl文件之后，直接就可以渲染对应的html模板。
var indexTpl = require('./index.tpl');
document.body.innerHTML = indexTpl(data);通过raw-loader和ejs-loader的对比，我们可以对webpack的loader使用有了一些认识，那就是loader是将不同类型的文件通过某种解析方式模块化到我们的代码中，然后提供给Javascript进一步的处理。
代码地址：https://github.com/gebin/underscore-tpl-loader-demo
