成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何創(chuàng)建一個webpack loader

April / 442人閱讀

摘要:在目前的開源市場,前端架構(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!")webpack都是可以訪問到我們的本地loader的,所以這點無需擔(dān)心

其次
一個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

相關(guān)文章

  • Webpack入門到精通(1)

    前言 什么是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)化 代碼分割 模塊合并 ...

    SunZhaopeng 評論0 收藏0
  • Webpack入門到精通(1)

    前言 什么是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)化 代碼分割 模塊合并 自...

    wangbinke 評論0 收藏0
  • 使用 webpack 4 和 Babel 7 構(gòu)建 React 應(yīng)用及如何引入 Material D

    摘要:建立項目首先,創(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ì)文章等著你! 在過去的一年和...

    asoren 評論0 收藏0
  • webpack初探

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

    soasme 評論0 收藏0
  • webpack初探

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

    Lavender 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<