webpack之loader实践

初识前端模板概念的开发者，通常都使用过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});

index.js