如何創建一個webpack loader

April 發布于2019-06-24 17:48 / 435人閱讀

摘要：在目前的開源市場，前端架構中最火熱的項目非莫屬了。在使用的過程中，我們會用到各式各樣的，毫無疑問，因為機制的存在讓擁有了無限的可能性，讓幾乎可以容納一切前端需要的資源。

在目前的開源市場，前端架構中最火熱的項目非webpack莫屬了。在使用webpack的過程中，我們會用到各式各樣的loader，毫無疑問，因為loader機制的存在讓webpack擁有了無限的可能性，讓webpack幾乎可以容納一切前端需要的資源。同時合理得利用loader也有助于我們在架構項目的時候省去很多重復工作，今天我們就來講講如何創建一個webpack的loader

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

首先
你需要知道如何調試你本地的loader，幸運的是，不管是在webpack.config.js中寫相對路徑還是直接require("./loader-name!")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，不然的話很容易出現內容不更新等情況

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11727.html

Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并 ...

SunZhaopeng 2019-05-23 17:29 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并自...

wangbinke 2019-08-26 13:52 評論0 收藏0
使用 webpack 4 和 Babel 7 構建 React 應用及如何引入 Material D

摘要：建立項目首先，創建工程目錄現在我們已經創建了我們要開發應用程序的文件夾，接著需要添加一個文件。這里為了版本的一致性，我把里的版本號前面刪除了。為此，需要創建一個名為的文件，用來配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！在過去的一年和...

asoren 2019-08-23 15:17 評論0 收藏0
webpack初探

摘要：我們還想要的顏色我們通過下面命令行可以做到觀察模式我們不想每一次項目變化都要手動編譯可以緩存兩次編譯之間沒有變化的模塊和輸出文件。開發服務器使用開發服務器開發體驗會更好這將在本地啟動一個端口的服務，指向靜態文件以及自動編譯。原文英文版來自webpack官網 demo代碼本文地址歡迎瀏覽這是一篇通過一個小例子給你介紹webpack的文章你可以通過這篇文章了解到：如...

soasme 2019-08-19 17:12 評論0 收藏0
webpack初探

摘要：我們還想要的顏色我們通過下面命令行可以做到觀察模式我們不想每一次項目變化都要手動編譯可以緩存兩次編譯之間沒有變化的模塊和輸出文件。開發服務器使用開發服務器開發體驗會更好這將在本地啟動一個端口的服務，指向靜態文件以及自動編譯。原文英文版來自webpack官網 demo代碼本文地址歡迎瀏覽這是一篇通過一個小例子給你介紹webpack的文章你可以通過這篇文章了解到：如...

Lavender 2019-08-28 18:27 評論0 收藏0