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已经执行完毕。
比如如果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"
为了解决这种问题,我们需要在style-loader里执行require(css-loader!resouce), 这会把css-loader跑一遍,也就是说如果按正常顺序执行css-loader会跑两遍(第一遍拿到的js代码用不了), 为了只执行一次,style-loader利用了pitching, 在pitching函数里require(css-loader!resouce)。然后返回js代码(style-loader能够作为最左边loader)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文掌握PHP Xdebug 本地与远程调试(小结)
- PHP生成随机码的思路与方法实例探索
- CI框架教程之优化验证码机制详解【验证码辅助函数】
- ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
- PHP中str_split()函数的用法讲解
- 微信JSSDK分享功能图文实例详解
- spring-boot-route(八)整合mybatis操作数据库
- PHP扩展Swoole实现实时异步任务队列示例
- ThinkPHP框架下微信支付功能总结踩坑笔记
- spring-boot-route(九)整合JPA操作数据库
- spring-boot-route(十)多数据源切换
- spring-boot-route(十一)数据库配置信息加密
- PHP中number_format()函数的用法讲解
- php7新特性的理解和比较总结
- PHP之认识(二)关于Traits的用法详解