webpack的pitching loader详解


Posted in Javascript onSeptember 23, 2019

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 相关文章推荐
js实现日期级联效果
Jan 23 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 #Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
小程序实现锚点滑动效果
Sep 23 #Javascript
React Native 混合开发多入口加载方式详解
Sep 23 #Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 #Javascript
You might like
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python enumerate内置函数用法总结
2020/01/07 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
档案管理员岗位职责
2013/12/01 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
无偿献血倡议书
2014/04/14 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
财政局个人年终总结
2015/03/03 职场文书
小学主题班会教案
2015/08/17 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python