在上一篇《webpack從入門到上線》介紹了wepack的配置和相關的概念，這一篇介紹怎樣寫一個webpack loader. 通過寫一個js的html模板為例子。 上篇文章已提及，loader載入器就是對各種非正常資源的解析，轉化成瀏覽器可以識別的js/css文件等，甚至可以說loader就是一個 ...
在上一篇《webpack從入門到上線》介紹了wepack的配置和相關的概念，這一篇介紹怎樣寫一個webpack loader. 通過寫一個js的html模板為例子。
上篇文章已提及，loader載入器就是對各種非正常資源的解析，轉化成瀏覽器可以識別的js/css文件等，甚至可以說loader就是一個小型的編譯器。例如sass loader：將sass格式編譯成css，在安裝sass的過程中你會發現，其實sass用的是C++，sass本身是面向對象的。但是本文不會介紹怎樣寫一個編譯器（我也不知道），只是簡單介紹下怎樣寫一個loader，拋磚引玉。
有什麼樣的場景需要寫一個loader呢？
有一個就是在js裡面寫html的模板，會有點不太方便，一個是語法不是高亮的，第二個是需要雙引號把每一行包起來，或者用數組push之類的，所以如果能夠require一個html文件，然後轉化成相應的js字元串，那就比較方便了。（如果你用react開發的，用jsx是比較自然的事情）。我在網上找了下，沒有找到能夠比較符合上面兩點需求的loader，所以就自己嘗試寫一個吧。
js模板通常有三種場景：
- 純html，一個文件就是一個模板，直接轉成字元串即可；
- 需要有變數，一個文件有幾個模板，每個模板對應一個變數
- 再複雜一點，模板是require了其它的工廠模塊生成的字元串
現在開始來寫loader
loader的基本框架
首先在工程的node_modules下麵新建一個文件夾html-template-loader，在裡面創建一個index.js做為這個loader的js文件。這樣就可以在webpack.config.js裡面添加一個loader了：
添加loader配置 JavaScript| 1 2 3 4 | { test:/\.tpl\.html$/, loader:'html-template-loader' } |
以.tpl.html作為尾碼名，也就是說在邏輯代碼裡面引入一個.tpl.html結尾的文件，就歸這個loader處理
require tpl html JavaScript| 1 | vartpl=require("./dialog.tpl.html"); |
重點就在於，這個loader怎麼寫呢？
loader也需要寫成一個模塊，一個基本的loader的寫法：
html-template-loader/index.js JavaScript| 1 2 3 4 5 6 7 8 | /** * source為原文件的字元串格式 */ module.exports=function(source,map){ //對source進行解析 varexports=process(source); return"module.exports = "+exports; } |
是的，你沒看錯，一個loader就是這麼簡單。關鍵在於理解loader的機制——其實loader最後會創建一個模塊，當我們require一個需要讓loader的解析的文件之後，通過上面第7行的return——return裡面的內容就是自動創建的模塊的內容，跟平時自已寫的模塊的區別就在於這個要自己拼成一個js語法合法的字元串。
如上面生成的exports為：
JavaScript| 1 2 | var exports="var tpl = {email: '<div>1</div>', hello: '<p>2</p>'}"; return"var tpl = "+tpl+";\n module.exports = tpl;"; |
那麼webpack自動創建這樣一個模塊：
webpack自動創建的模塊 JavaScript| 1 2 3 4 5 | /***/109: /***/function(module,exports){ var tpl={email:'<div>1</div>',hello:'<p>2</p>'}; module.exports=tpl; /***/} |
在我這個工程，這個模塊的id為109，然後require的返回結果就是這個tpl的object。
另外一方面，初始化的時候可以拿到source，這個source就是webpack以utf-8讀的整個文件的內容，以字元串的形式作為一個參數傳進來。
所以現在目標就很明確了，我們需要處理這個source的字元串，然後再返回一個可以eval的字元串。需要定義loader的輸入和輸出的格式，這是作為loader開發者的權利，同時中間的處理過程對用戶屏蔽。
loader的具體實現
把source這整一個文件，拆成一行一行處理：
把source拆成一行一行 JavaScript| 1 2 3 4 5 6 7 8 9 10 | var tpl=""; source.split(/\r?\n/).forEach(function(line){ line=line.trim(); if(!line.length){ return; } //對line進行處理... tpl+=process(line); } return "module.exports = ..."; |
難點就在於第8行的process函數怎麼寫，怎樣拼成一個合法的tpl字元串。
如果是上面提到的第一種場景，則很簡單，直接加就好了；
如果是第二種場景需要用變數區分的，那麼需要自定義一個語法，由於我們用的是html，因為有高亮的功能。所以可考慮用html的註釋的標簽：
用<!--%變數名%-->的格式定義變數名| 1 2 3 4 5 6 7 8 | <!--%email%--> <div> <p>hello,world</p> </div> <!--%alert%--> <p>hi</p> <span>man</span> |
我們的語法就是<!–%變數名%–>，像上面定義了兩個變數email和alert，接下來在process函數裡面就可以進行識別、拼一個object的字元串。
如果是第三種場景需要引入第三方模塊的，則需要在最後一行return的時候加上require這個函數的代碼，即：
JavaScript| 1 2 | return "var widget = require(../widgetFactory");\n" + "module.exports=widget.make()"; |
同樣地，需要定義一個語法，require的代碼用script的方式：
需要依賴的代碼格式 JavaScript| 1 | <script generate>varSELECT=require("js/select");</script> |
以一個generate的屬性標誌，這塊是需要依賴的代碼，也就是說要把它拼在前面。
正常的調用就用一個script，不帶屬性：
| 1 2 3 4 5 6 7 |
<!--
  更多相關文章
一周排行
 所有分類
|