webpack的pitchingloader详解-创新互联

webpack中关于pitching loader的文档比较不清楚:

创新互联自2013年创立以来,是专业互联网技术服务公司,拥有项目成都网站设计、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元北碚做网站,已为上家服务,为北碚各地企业和个人服务,联系电话:18980820575

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已经执行完毕。

比如如果b返回了字符串"result b", 接下来只有a会被系统执行,且a的loader收到的参数是result b。

也就是说pitching loader的初衷是为了提升效率,少执行几个loader。


然而这样的机会并不多。更为常用的是它的另一个用途。


根据官方文档:

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根据返回值可以分为两种,一种是返回js代码(一个module的代码,含有类似module.export语句)的loader,还有不能作为最左边loader的其他loader

问题是有时候我们想把两个第一种loader chain起来,比如style-loader!css-loader!


问题是css-loader的返回值是一串js代码,如果按正常方式写style-loader的参数就是一串代码字符串。就算eval了也不一定拿到什么值

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

分享标题:webpack的pitchingloader详解-创新互联
文章分享:http://scyanting.com/article/cdeegj.html