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 相关文章推荐
JavaScript自执行闭包的小例子
Jun 29 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
JS实现放烟花效果
Mar 10 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python变量和字符串详解
2017/04/29 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python paramiko模块的使用示例
2018/04/11 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
pycharm修改file type方式
2019/11/19 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
利用Python优雅的登录校园网
2020/10/21 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Windows和Linux动态库应用异同
2016/07/28 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
实习单位推荐信范文
2013/11/27 职场文书
机械专业技术员求职信
2014/06/14 职场文书
六一亲子活动总结
2014/07/01 职场文书
教师师德承诺书2016
2016/03/25 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis