webpack的pitching loader

webpack中關于pitching loader的文檔比較不清楚:

The loaders are called from right to left. But in some cases loaders do not care about the results of the previous loader or the resource. They only care for metadata. The pitch method on the loaders is called from left to right before the loaders are called. If a loader delivers a result in the pitch method the process turns around and skips the remaining loaders, continuing with the calls to the more left loaders. data can be passed between pitch and normal call.

比如a!b!c!module, 正常調用順序應該是c、b、a口芍,但是真正調用順序是
a(pitch)昵宇、b(pitch)喘帚、c(pitch)负溪、c蓬推、b、a俺抽, 如果其中任何一個pitching loader返回了值就相當于在它以及它右邊的loader已經執(zhí)行完畢敞映。

比如如果b返回了字符串"result b", 接下來只有a會被系統(tǒng)執(zhí)行,且a的loader收到的參數(shù)是result b磷斧。

也就是說pitching loader的初衷是為了提升效率振愿,少執(zhí)行幾個loader。
然而這樣的機會并不多瞳抓。更為常用的是它的另一個用途埃疫。
根據(jù)官方文檔:

In the complex case, when multiple loaders are chained, only the last loader gets the resource file and only the first loader is expected to give back one or two values (JavaScript and SourceMap). Values that any other loader give back are passed to the previous loader.

loader根據(jù)返回值可以分為兩種,一種是返回js代碼(一個module的代碼孩哑,含有類似module.export語句)的loader栓霜,還有不能作為最左邊loader的其他loader

問題是有時候我們想把兩個第一種loader chain起來,比如style-loader!css-loader!
問題是css-loader的返回值是一串js代碼横蜒,如果按正常方式寫style-loader的參數(shù)就是一串代碼字符串胳蛮。就算eval了也不一定拿到什么值

eval('module.export="result";console.log("hello world")') === "hello world"

為了解決這種問題,我們需要在style-loader里執(zhí)行require(css-loader!resouce), 這會把css-loader跑一遍丛晌,也就是說如果按正常順序執(zhí)行css-loader會跑兩遍(第一遍拿到的js代碼用不了), 為了只執(zhí)行一次仅炊,style-loader利用了pitching, 在pitching函數(shù)里require(css-loader!resouce)。然后返回js代碼(style-loader能夠作為最左邊loader)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末澎蛛,一起剝皮案震驚了整個濱河市抚垄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谋逻,老刑警劉巖呆馁,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異毁兆,居然都是意外死亡浙滤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門气堕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纺腊,“玉大人,你說我怎么就攤上這事茎芭∫灸ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵梅桩,是天一觀的道長次氨。 經常有香客問我,道長摘投,這世上最難降的妖魔是什么煮寡? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任虹蓄,我火速辦了婚禮,結果婚禮上幸撕,老公的妹妹穿的比我還像新娘薇组。我一直安慰自己,他們只是感情好坐儿,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布律胀。 她就那樣靜靜地躺著,像睡著了一般貌矿。 火紅的嫁衣襯著肌膚如雪炭菌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天逛漫,我揣著相機與錄音黑低,去河邊找鬼。 笑死酌毡,一個胖子當著我的面吹牛克握,可吹牛的內容都是我干的。 我是一名探鬼主播枷踏,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼菩暗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了旭蠕?” 一聲冷哼從身側響起停团,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掏熬,沒想到半個月后佑稠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡孽江,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了番电。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岗屏。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖漱办,靈堂內的尸體忽然破棺而出这刷,到底是詐尸還是另有隱情,我是刑警寧澤娩井,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布暇屋,位于F島的核電站,受9級特大地震影響洞辣,放射性物質發(fā)生泄漏咐刨。R本人自食惡果不足惜昙衅,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望定鸟。 院中可真熱鬧而涉,春花似錦、人聲如沸联予。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沸久。三九已至季眷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卷胯,已是汗流浹背子刮。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留诵竭,地道東北人话告。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像卵慰,于是被迫代替她去往敵國和親沙郭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內容

  • 構建工具逐漸成為前端工程必備的工具裳朋,Grunt病线、Gulp、Fis鲤嫡、Webpack等等送挑,譯者有幸使用過Fis、Gul...
    陳堅生閱讀 6,020評論 4 64
  • 可以結合慕課網(wǎng)的視頻來讀這篇文章暖眼,地址:http://www.imooc.com/learn/802 Webpac...
    哈哈騰飛閱讀 1,881評論 0 7
  • 我現(xiàn)在變得可摳兒诫肠!干什么都想省著點司澎,不想讓花那么多錢! 現(xiàn)在xx打扮得像個妖怪一樣栋豫,臉那么白挤安,昨天來我們家我都沒認...
    叮咚的你閱讀 279評論 3 3
  • 姓名:陳芬 公司:寧波慈星股份有限公司 寧波盛和塾《六項精進》224期學員,利他二組學員 【日精進打卡第196天】...
    龍芬浩閱讀 209評論 0 0
  • 晚飯要精打細算,怎樣吃的更多更有營養(yǎng)更省錢∥Х剩看到別人光鮮亮麗剿干,風味小吃,卡布奇諾虐先,大臉雞排怨愤,壽司甚至泡芙都是一種失...
    豪ssman閱讀 291評論 0 0