如何建立一個webpack loader

在目前的開源市場，前端架構中最火熱的項目非webpack莫屬了。在使用webpack的過程當中，咱們會用到各式各樣的loader，毫無疑問，由於loader機制的存在讓webpack擁有了無限的可能性，讓webpack幾乎能夠容納一切前端須要的資源。同時合理得利用loader也有助於咱們在架構項目的時候省去不少重複工做，今天咱們就來說講如何建立一個webpack的loader

在最開始想到要寫loader的時候，其實我是拒絕的，由於webpack主要的功能是處理依賴以及編譯，一提到編譯我就頭疼，各類字符串處理能讓我上天。然而進一步瞭解以後我發現我想多了，大部分的時候編譯的工做並不須要你來作，很少講，看代碼。

首先
你須要知道如何調試你本地的loader，幸運的是，無論是在webpack.config.js中寫相對路徑仍是直接require('./loader-name!<file path>')webpack都是能夠訪問到咱們的本地loader的，因此這點無需擔憂

其次
一個loader就是一個方法，這個方法接受一個source參數包括指定文件的內容，this包含了不少webpack的方法和屬性供調用，該方法須要將你處理以後的內容返回，若是有sourcemap，也能夠一併將sourcemap返回，這個時候須要調用this.callback(null, source, map)，第一個null表明沒有錯誤，若是有錯誤的話就是一個Error對象

因此
一個loader大體長成這樣

module.exports = function (source) {
    if (cacheable) this.cacheable()
    
    // do something about the source
    
    return dealedSource // 返回處理過的source
    // this.callback(null, dealedSource, map) // 若是有sourcemap
    
}

記住cacheable那一步必需要執行，一方面他能夠提升webpack除第一次以外的編譯熟讀，再次若是有cacheable官方推薦是必須cacheable的，實踐狀況也是不執行的話會有奇葩錯誤，這點上由於webpack瞭解不深，同時也沒有相關文檔，因此不是很瞭解清楚（你知道webpack的源碼多大麼!!!!!）

而後
其實該講的就已經講完了。。。由於loader裏面的處理邏輯是根據你的實際狀況來的，這沒什麼好說的，好比less-loader裏面就是調用了less把source處理一下而後return出去，因此想到什麼的朋友應該已經能夠動手寫本身的loader了

好吧，再說點什麼
在我遇到狀況中，我須要在vue-loader以前作一些特定操做（經過demo生成文檔），因此我先去研究了一下vue-loader的源碼。vue-loader的操做邏輯我會從新起一片文章講，到時候我再貼過來，我只想抱怨一下vue-loader真是一個大坑，由於vue-loader實際上調用兩次文件的source，因此你在vue-loader以前對source作的任何操做都是沒什麼卵用，我了一整晚/(ㄒoㄒ)/~~

吐槽來了，點這裏

但在這種狀況下，仍是有辦法處理，只是感受有點hacker，並非那麼好，因此webpack得loader仍是能夠發揮你的不少想象力的。就醬，回家吃飯~~~

--------------- 4-15日補充 ----------------發現一個重點，那就是若是你的loader處理的文件有依賴於別的文件，你必須在loader裏面生命Dependency，否則的話很容易出現內容不更新等狀況