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?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             _: "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進一步的處理。 ###

以上是webpack之loader實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！