本篇內(nèi)容主要講解“怎么開(kāi)發(fā)Webpack Loader”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么開(kāi)發(fā)Webpack Loader”吧!

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為襄陽(yáng)企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，襄陽(yáng)網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

一、單一任務(wù)

loaders可以被鏈?zhǔn)秸{(diào)用，為每一步創(chuàng)建一個(gè)loader而非一個(gè)loader做所有事情。也就是說(shuō)，在非必要的狀況下沒(méi)有必要將他們轉(zhuǎn)換為js。

例如：通過(guò)查詢字符串將一個(gè)字符串模板轉(zhuǎn)化為html。

如果你寫(xiě)了個(gè)loader。做了所有事情那么你違背了loader的第一條要求。你應(yīng)該為每一個(gè)task創(chuàng)建一個(gè)loader并且通過(guò)管道來(lái)使用它們

(1)ade-loader: 轉(zhuǎn)換模板為一個(gè)module

(2) apply-loader:創(chuàng)建一個(gè)module并通過(guò)查詢參數(shù)來(lái)返回結(jié)果

(3)html-loade: 創(chuàng)建一個(gè)處理html并返回一個(gè)string的模塊

二、創(chuàng)建moulde話的模塊，即正常的模塊

loader產(chǎn)出的module應(yīng)該和遵循和普通的module一樣的設(shè)計(jì)原則。

舉個(gè)例子，下面這樣設(shè)計(jì)是不好的，沒(méi)有模塊化，依賴全局狀態(tài)。

三、盡量表明該loader是否可以緩存

大部分loaders是cacheable，所以應(yīng)該標(biāo)明是否cacheable，只需要在loader里面調(diào)用即可。

四、不要在運(yùn)行和模塊之間保存狀態(tài)

(1)一個(gè)loader相對(duì)于其他編譯后的模塊應(yīng)該是獨(dú)立的。 除非其可以自己處理這些狀態(tài)

(2)一個(gè)loader相對(duì)于同一模塊之前的編譯過(guò)程應(yīng)該是獨(dú)立的。

五、標(biāo)明依賴

如果該loader引用了其他資源(例如文件系統(tǒng))， 必須聲明它們。這些信息用來(lái)是緩存的loader失效并且重新編譯它們。

六、解析依賴

很多語(yǔ)言都提供了一些規(guī)范來(lái)聲明依賴，例如css中的 @import 和 url(...)。這些依賴應(yīng)該被模塊系統(tǒng)所解析。

下面是兩種解決方式：

1、將它們轉(zhuǎn)化成require

2、 用this.resolve方法來(lái)解析路徑

下面是兩個(gè)示例：

1、css-loader: 將依賴轉(zhuǎn)化成require，即用require來(lái)替換@import和 url(...)，解析對(duì)其他樣式文件的依賴

2、less-loader: 不能像css-loader那樣做，因?yàn)樗械膌ess文件需要一起編譯來(lái)解析變量和mixins。因此其通過(guò)一個(gè)公共的路徑邏輯來(lái)擴(kuò)展less編譯過(guò)程。這個(gè)公共的邏輯使用this.resolve來(lái)解析帶有module系統(tǒng)配置項(xiàng)的文件。例如aliasing, custom module directories等。

如果語(yǔ)言僅僅接受相對(duì)urls(如css中url(file) 總是代表./file)，使用~來(lái)說(shuō)明成模塊依賴.

七、抽離公共代碼

extract common code 我感覺(jué)還是翻譯成上面的標(biāo)題比較好。其實(shí)所有語(yǔ)言都遵循該思想，即封裝

不要寫(xiě)出來(lái)很多每個(gè)模塊都在使用的代碼，在loader中創(chuàng)建一個(gè)runtime文件，將公共代碼放在其中

八、避免寫(xiě)入絕對(duì)路徑

不要把絕對(duì)路徑寫(xiě)入到模塊代碼中。它們將會(huì)破壞hash的過(guò)程當(dāng)項(xiàng)目的根目錄發(fā)生改變的時(shí)候。應(yīng)該使用loader-utils的 stringifyRequest方法來(lái)絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑。

例子：

九、使用peerDependencies來(lái)指明依賴的庫(kù)

使用peerDependency允許應(yīng)用開(kāi)發(fā)者去在package.json里說(shuō)明依賴的具體版本。這些依賴應(yīng)該是相對(duì)開(kāi)放的允許工具庫(kù)升級(jí)而不需要重新發(fā)布loader版本。簡(jiǎn)而言之，對(duì)于peerDependency依賴的庫(kù)應(yīng)該是松耦合的，當(dāng)工具庫(kù)版本變化的時(shí)候不需要重新變更loader版本。

十、可編程對(duì)象作為查詢項(xiàng)

有些情況下，loader需要某些可編程的對(duì)象但是不能作為序列化的query參數(shù)被方法解析。例如less-loader通過(guò)具體的less-plugin提供了這種可能。這種情況下，loader應(yīng)該允許擴(kuò)展webpack的options對(duì)象去獲得具體的option。為了避免名字沖突，基于loader的命名空間來(lái)命名是很必要的。

到此，相信大家對(duì)“怎么開(kāi)發(fā)Webpack Loader”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前文章：怎么開(kāi)發(fā)WebpackLoader-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://www.chinadenli.net/article8/dccpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、全網(wǎng)營(yíng)銷(xiāo)推廣、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站策劃、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)