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