摘要:在目前的開源市場,前端架構(gòu)中最火熱的項目非莫屬了。在使用的過程中,我們會用到各式各樣的,毫無疑問,因為機制的存在讓擁有了無限的可能性,讓幾乎可以容納一切前端需要的資源。
在目前的開源市場,前端架構(gòu)中最火熱的項目非webpack莫屬了。在使用webpack的過程中,我們會用到各式各樣的loader,毫無疑問,因為loader機制的存在讓webpack擁有了無限的可能性,讓webpack幾乎可以容納一切前端需要的資源。同時合理得利用loader也有助于我們在架構(gòu)項目的時候省去很多重復(fù)工作,今天我們就來講講如何創(chuàng)建一個webpack的loader
在最開始想到要寫loader的時候,其實我是拒絕的,因為webpack主要的功能是處理依賴以及編譯,一提到編譯我就頭疼,各種字符串處理能讓我上天。然而進一步了解之后我發(fā)現(xiàn)我想多了,大部分的時候編譯的工作并不需要你來做,不多講,看代碼。
首先
你需要知道如何調(diào)試你本地的loader,幸運的是,不管是在webpack.config.js中寫相對路徑還是直接require("./loader-name!
其次
一個loader就是一個方法,這個方法接受一個source參數(shù)包括指定文件的內(nèi)容,this包含了很多webpack的方法和屬性供調(diào)用,該方法需要將你處理之后的內(nèi)容返回,如果有sourcemap,也可以一并將sourcemap返回,這個時候需要調(diào)用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那一步必須要執(zhí)行,一方面他可以提高webpack除第一次之外的編譯熟讀,再次如果有cacheable官方推薦是必須cacheable的,實踐情況也是不執(zhí)行的話會有奇葩錯誤,這點上因為webpack了解不深,同時也沒有相關(guān)文檔,所以不是很了解清楚(你知道webpack的源碼多大么!!!!!)
然后
其實該講的就已經(jīng)講完了。。。因為loader里面的處理邏輯是根據(jù)你的實際情況來的,這沒什么好說的,比如less-loader里面就是調(diào)用了less把source處理一下然后return出去,所以想到什么的朋友應(yīng)該已經(jīng)可以動手寫自己的loader了
好吧,再說點什么
在我遇到情況中,我需要在vue-loader之前做一些特定操作(通過demo生成文檔),所以我先去研究了一下vue-loader的源碼。vue-loader的操作邏輯我會重新起一片文章講,到時候我再貼過來,我只想抱怨一下vue-loader真是一個大坑,因為vue-loader實際上調(diào)用兩次文件的source,所以你在vue-loader之前對source做的任何操作都是沒什么卵用,我了一整晚/(ㄒoㄒ)/~~
吐槽來了,點這里
但在這種情況下,還是有辦法處理,只是感覺有點hacker,并不是那么好,所以webpack得loader還是可以發(fā)揮你的很多想象力的。就醬,回家吃飯~~~
--------------- 4-15日補充 ----------------
發(fā)現(xiàn)一個重點,那就是如果你的loader處理的文件有依賴于別的文件,你必須在loader里面生命Dependency,不然的話很容易出現(xiàn)內(nèi)容不更新等情況
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/11727.html
前言 什么是webpack 本質(zhì)上,webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...
前言 什么是webpack 本質(zhì)上,webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...
摘要:建立項目首先,創(chuàng)建工程目錄現(xiàn)在我們已經(jīng)創(chuàng)建了我們要開發(fā)應(yīng)用程序的文件夾,接著需要添加一個文件。這里為了版本的一致性,我把里的版本號前面刪除了。為此,需要創(chuàng)建一個名為的文件,用來配置。 showImg(https://segmentfault.com/img/bVboiHi?w=1000&h=625); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 在過去的一年和...
閱讀 2520·2023-04-25 17:37
閱讀 1203·2021-11-24 10:29
閱讀 3709·2021-09-09 11:57
閱讀 704·2021-08-10 09:41
閱讀 2257·2019-08-30 15:55
閱讀 2823·2019-08-30 15:54
閱讀 1951·2019-08-30 15:53
閱讀 906·2019-08-30 15:43