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

var _ = require('underscore');

// 這里可以看到indexTplFile只是字符串
var indexTplStr = require('./index.tpl'); 
// template方法將其封裝成一個方法
var indexTpl = _.template(indexTplStr);
 
var data = [
    {
        name: 'mike',
        age: 18,
        sex: '男'
    },
    {
        name: 'nina',
        age: 20,
        sex: '女'
    },
    {
        name: 'elle',
        age: 26,
        sex: '女'
    }
];    

document.body.innerHTML = indexTpl({data:data});

 

運行npm install 之后，運行webpack，打開index.html，就可以看到如下結果。

姓名：mike,年齡：18,性別：男 姓名：nina,年齡：20,性別：女 姓名：elle,年齡：26,性別：女

但是可以看得出來，在渲染模板的過程中，執行了三行代碼，如果我們想只用一行代碼就生成最終的HTML字符串，繼續嘗試ejs-loader 。

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders:[ 
            { 
                test: /\.tpl$/, 
                loader: 'ejs-loader?variable=data'
            },
        ]
    }, 
    plugins: [ 
        new HtmlWebpackPlugin(),
        // 提供全局變量_
        new webpack.ProvidePlugin({
            _: "underscore"
        })
    ]
};

在代碼中使用也變得非常簡單，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