{ "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"
 }
}

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()]
};

<% _.each(data, function(n){ %><p>姓名：<%= n.name %>,年齡：<%= n.age %>,性別：<%= n.sex %></p><% }); %>

 1 var _ = require('underscore'); 2 3 // 這里可以看到indexTplFile只是字符串 4 var indexTplStr = require('./index.tpl'); 
 5 // template方法將其封裝成一個(gè)方法 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});

姓名：mike,年齡：18,性別：男

姓名：nina,年齡：20,性別：女

姓名：elle,年齡：26,性別：女

 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 };

var indexTpl = require('./index.tpl');
document.body.innerHTML = indexTpl(data);