webpack的pitching loader详解
webpack中关于pitchingloader的文档比较不清楚：
Theloadersarecalledfromrighttoleft.Butinsomecasesloadersdonotcareabouttheresultsofthepreviousloaderortheresource.Theyonlycareformetadata.Thepitchmethodontheloadersiscalledfromlefttorightbeforetheloadersarecalled.Ifaloaderdeliversaresultinthepitchmethodtheprocessturnsaroundandskipstheremainingloaders,continuingwiththecallstothemoreleftloaders.datacanbepassedbetweenpitchandnormalcall.
比如a!b!c!module,正常调用顺序应该是c、b、a，但是真正调用顺序是
a(pitch)、b(pitch)、c(pitch)、c、b、a，如果其中任何一个pitchingloader返回了值就相当于在它以及它右边的loader已经执行完毕。
比如如果b返回了字符串"resultb",接下来只有a会被系统执行，且a的loader收到的参数是resultb。
也就是说pitchingloader的初衷是为了提升效率，少执行几个loader。
然而这样的机会并不多。更为常用的是它的另一个用途。
根据官方文档：
Inthecomplexcase,whenmultipleloadersarechained,onlythelastloadergetstheresourcefileandonlythefirstloaderisexpectedtogivebackoneortwovalues(JavaScriptandSourceMap).Valuesthatanyotherloadergivebackarepassedtothepreviousloader.
loader根据返回值可以分为两种，一种是返回js代码（一个module的代码，含有类似module.export语句）的loader，还有不能作为最左边loader的其他loader
问题是有时候我们想把两个第一种loaderchain起来，比如style-loader!css-loader!
问题是css-loader的返回值是一串js代码，如果按正常方式写style-loader的参数就是一串代码字符串。就算eval了也不一定拿到什么值
eval('module.export="result";console.log("helloworld")')==="helloworld"
为了解决这种问题，我们需要在style-loader里执行require(css-loader!resouce),这会把css-loader跑一遍，也就是说如果按正常顺序执行css-loader会跑两遍（第一遍拿到的js代码用不了）,为了只执行一次，style-loader利用了pitching,在pitching函数里require(css-loader!resouce)。然后返回js代码（style-loader能够作为最左边loader）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。