.33-浅析webpack源码之doResolve事件流(5)
file => FileExistsPlugin
这个事件流快接近尾声了,接下来是FileExistsPlugin,很奇怪的是在最后才来检验路径文件是否存在。
源码如下:
FileExistsPlugin.prototype.apply = function(resolver) {
var target = this.target;
resolver.plugin(this.source, function(request, callback) {
var fs = this.fileSystem;
// file => d:\workspace\doc\input.js
var file = request.path;
fs.stat(file, function(err, stat) {
// stat => 文件信息
if (err || !stat) {
if (callback.missing) callback.missing.push(file);
if (callback.log) callback.log(file + " doesn't exist");
return callback();
}
// 是否为文件
if (!stat.isFile()) {
if (callback.missing) callback.missing.push(file);
if (callback.log) callback.log(file + " is not a file");
return callback();
}
// 只做信息提示 不对结果做处理
this.doResolve(target, request, "existing file: " + file, callback, true);
}.bind(this));
});
};
这里只是简单的对路径文件进行状态获取,然后判断是否存在?是否是文件?最后调用一个有message的doResolve方法进入到下一个事件流。
existing-file => NextPlugin
这个插件没什么卵用,之前提到过,会直接跳到下一个事件流。
resolved => ResultPlugin
这是最后一个插件,在注入的时候只有一个参数,代表事件流的结尾。
ResultPlugin.prototype.apply = function(resolver) {
resolver.plugin(this.source, function(request, callback) {
var obj = Object.assign({}, request);
// 调用resolver的事件流
resolver.applyPluginsAsyncSeries1("result", obj, function(err) {
if (err) return callback(err);
callback(null, obj);
});
});
};
这里直接调用了resolver的result事件流,并没有通过doResolve方法。
经过测试,这个事件流并不存在,所以会直接调用无参callback,这个callback是什么呢???
找了很久很久,终于找到了,回到最开始的resolve方法中,有个函数:
function onResolve(err, result) {
// 无错误情况下调用这个
if (!err && result) {
return callback(null, result.path === false ? false : result.path + (result.query || ""), result);
}
localMissing = [];
log = [];
// 错误处理
return resolver.doResolve("resolve", obj, message, createInnerCallback(onError, {
log: writeLog,
missing: localMissing,
stack: callback.stack
}));
}
这里因为成功执行完事件流,第一个参数为null,所以会进入第一个if分支,最后返回的是path与result。
这个callback就简单了,回到了resolve方法的调用地点:
asyncLib.parallel([
callback => this.resolveRequestArray(contextInfo, context, elements, this.resolvers.loader, callback),
callback => {
if (resource === "" || resource[0] === "?")
return callback(null, {
resource
});
this.resolvers.normal.resolve(contextInfo, context, resource, (err, resource, resourceResolveData) => {
// 从这里开始
if (err) return callback(err);
/*
resource => d:\workspace\doc\input.js
resourceResolveData =>
{
context: { issuer: '', compiler: undefined },
path: 'd:\\workspace\\doc\\input.js',
request: undefined,
query: '',
module: false,
file: false,
descriptionFilePath: 'd:\\workspace\\doc\\package.json',
descriptionFileData:{ *配置文件内容* },
descriptionFileRoot: 'd:\\workspace\\doc',
relativePath: './input.js',
__innerRequest_request: undefined,
__innerRequest_relativePath: './input.js',
__innerRequest: './input.js'
}
*/
callback(null, {
resourceResolveData,
resource
});
});
}
], (err, results) => { /**/ })
总结
这里对之前的resolve方法所做的流程做一个总结,画一个图。
剔除一些诸如NextPlugin这种垃圾插件以及重复加载的插件,插件加载按顺序,所有的type的before、after均视为一个事件流,特殊分支给给出说明。

.33-浅析webpack源码之doResolve事件流(5)的更多相关文章
- .30-浅析webpack源码之doResolve事件流(1)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- .30-浅析webpack源码之doResolve事件流(2)
这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...
- .29-浅析webpack源码之doResolve事件流(1)
在上一节中,最后返回了一个resolver,本质上就是一个Resolver对象: resolver = new Resolver(fileSystem); 这个对象的构造函数非常简单,只是简单的继承了 ...
- .31-浅析webpack源码之doResolve事件流(2)
放个流程图: 这里也放一下request对象内容,这节完事后如下(把vue-cli的package.json也复制过来了): /* { context: { issuer: '', compiler: ...
- .32-浅析webpack源码之doResolve事件流(4)
流程图如下: 重回DescriptionFilePlugin 上一节最后进入relative事件流,注入地点如下: // relative plugins.push(new DescriptionFi ...
- .34-浅析webpack源码之事件流make(3)
新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolv ...
- 浅析libuv源码-node事件轮询解析(3)
好像博客有观众,那每一篇都画个图吧! 本节简图如下. 上一篇其实啥也没讲,不过node本身就是这么复杂,走流程就要走全套.就像曾经看webpack源码,读了300行代码最后就为了取package.js ...
- .27-浅析webpack源码之事件流make(2)
上一节跑到了NormalModuleFactory模块,调用了原型方法create后,依次触发了before-rsolve.factory.resolver事件流,这节从resolver事件流开始讲. ...
- .17-浅析webpack源码之compile流程-入口函数run
本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...
随机推荐
- centos7 搭建WEB服务器
centos7 搭建WEB服务器 2017年09月17日 09:44:50 逝然1994 阅读数:18321 标签: centosapacheweb服务器 更多 个人分类: centos服务器简单配置 ...
- 【vue】http-server开启本地服务
在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一 ...
- 企业项目开发--cookie(1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注:本章代码基于<第五章 企业项目开发--mybatis注解与xml并用>的代码,链接如下: h ...
- Python3.5 学习二十
学会用三种方法检索数据 1.对象方式 2.字典方式 3.元组方式 models后面,如果是.values() 则为字典方式 如果是value_list() 则为元组方式 跨表操作时,如果是对象,可以用 ...
- Python-实现图表绘制总结
Numpy是Python开源的数值计算扩展,可用来存储和处理大型矩阵,比Python自身数据结构要高效: matplotlib是一个Python的图像框架,使用其绘制出来的图形效果和MATLAB下绘制 ...
- jzoj4229
按照題意暴力模擬即可 #include<bits/stdc++.h> using namespace std; int m; typedef long long ll; ll a1,q,n ...
- canvas制作完美适配分享海报
基于mpvue实现的1080*1900小程序海报 html <canvas class="canvas" :style="'width:'+windowWidt ...
- DES/3DES/AES区别
公元前400年,古希腊人发明了置换密码.1881年世界上的第一个电话保密专利出现.在第二次世界大战期间,德国军方启用“恩尼格玛”密码机,密码学在战争中起着非常重要的作用. DES 1977年1月,美国 ...
- [JavaScript] html5 video标签注意事项
Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...
- springBoot的搭建使用记录
一: 首次搭建:https://blog.csdn.net/u013187139/article/details/68944972 整合mybatis: https://www.jianshu.com ...