初识前端模板概念的开发者，通常都使用过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?1.1.10,  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});
index.js
运行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             _: underscore21         })22     ]23 };
在代码中使用也变得非常简单，require对应的tpl文件之后，直接就可以渲染对应的html模板。
var indextpl = require('./index.tpl'); document.body.innerhtml = indextpl(data);
通过raw-loader和ejs-loader的对比，我们可以对webpack的loader使用有了一些认识，那就是loader是将不同类型的文件通过某种解析方式模块化到我们的代码中，然后提供给javascript进一步的处理。
以上就是webpack之loader实践的详细内容。