.22-浅析webpack源码之事件流compilation总览
呃,终于到了这地方……
newCompilation(params) {
// ...
this.applyPlugins("this-compilation", compilation, params);
//
console.log(this._plugins['compilation'].length);
this.applyPlugins("compilation", compilation, params);
return compilation;
}
MMP,有31个函数,估计可以写到明年了。
这里先梳理所有事件的注入来源,经检测,全部来源于WebpackOptionsApply中,回到那个可怕的模块,梳理后如下:
class WebpackOptionsApply extends OptionsApply {
constructor() {
super();
}
process(options, compiler) {
// ...
if (typeof options.target === "string") {
// ...
switch (options.target) {
case "web":
JsonpTemplatePlugin = require("./JsonpTemplatePlugin");
NodeSourcePlugin = require("./node/NodeSourcePlugin");
compiler.apply(
new JsonpTemplatePlugin(options.output),
// plugin + 3
new FunctionModulePlugin(options.output),
new NodeSourcePlugin(options.node),
new LoaderTargetPlugin(options.target)
);
break;
// ...
}
}
// ... // plugin + 1
compiler.apply(new EntryOptionPlugin());
compiler.applyPluginsBailResult("entry-option", options.context, options.entry);
// plugin + 24
compiler.apply( /**/ ); compiler.apply( /**/ ); // ...
// plugin + 1
compiler.apply(new TemplatedPathPlugin());
// plugin + 1
compiler.apply(new RecordIdsPlugin());
// plugin + 1
compiler.apply(new WarnCaseSensitiveModulesPlugin());
// ...
return options;
}
}
还好都集中在一个地方,这样又可以写流水账了。
这里先要过一个地方,之前似乎遗留了:
compiler.apply(new EntryOptionPlugin());
compiler.applyPluginsBailResult("entry-option", options.context, options.entry);
这里注入了entry-option事件流,并在下一行代码触发,所以直接进去看实现:
function itemToPlugin(context, item, name) {
if (Array.isArray(item)) {
return new MultiEntryPlugin(context, item, name);
}
return new SingleEntryPlugin(context, item, name);
} module.exports = class EntryOptionPlugin {
apply(compiler) {
// context => options.context
// entry => options.entry
compiler.plugin("entry-option", (context, entry) => {
// 针对单字符串或数组情况
if (typeof entry === "string" || Array.isArray(entry)) {
// 输出文件为main
compiler.apply(itemToPlugin(context, entry, "main"));
}
// 对象 => 多入口
else if (typeof entry === "object") {
Object.keys(entry).forEach(name => compiler.apply(itemToPlugin(context, entry[name], name)));
}
// 函数
else if (typeof entry === "function") {
compiler.apply(new DynamicEntryPlugin(context, entry));
}
return true;
});
}
};
这里针对字符串、数组、对象、函数四种情况分别做了处理,先只看单字符串,其余情况后面单独讲解。
单字符串会进入SingleEntryPlugin插件:
"use strict";
const SingleEntryDependency = require("./dependencies/SingleEntryDependency");
class SingleEntryPlugin {
constructor(context, entry, name) {
this.context = context;
this.entry = entry;
this.name = name;
};
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => { /**/ });
compiler.plugin("make", (compilation, callback) => { /**/ });
};
static createDependency(entry, name) {
// 该模块有一个isEqualResource方法判断entry是否一样
const dep = new SingleEntryDependency(entry);
dep.loc = name;
return dep;
}
}
这里引入的SingleEntryDependency原型链比较长,而且没有什么营养,出一个示意图,不贴源码了:
可以看到该模块注入了两个事件流,静态方法后面再讲。
第一小节先这样结束吧!
.22-浅析webpack源码之事件流compilation总览的更多相关文章
- .23-浅析webpack源码之事件流compilation(1)
正式开始跑编译,依次解析,首先是: compiler.apply( new JsonpTemplatePlugin(options.output), // start new FunctionModu ...
- .24-浅析webpack源码之事件流compilation(2)
下一个compilation来源于以下代码: compiler.apply(new EntryOptionPlugin()); compiler.applyPluginsBailResult(&quo ...
- .25-浅析webpack源码之事件流compilation(3)
这一节跑下一批plugin. compiler.apply( new EnsureChunkConditionsPlugin(), new RemoveParentModulesPlugin(), n ...
- .21-浅析webpack源码之事件流this-compilation
上一节生成Compilation实例后,添加了一些属性,随后触发this-compilation事件流,如下: Compiler.prototype.newCompilation = (params) ...
- .34-浅析webpack源码之事件流make(3)
新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolv ...
- .27-浅析webpack源码之事件流make(2)
上一节跑到了NormalModuleFactory模块,调用了原型方法create后,依次触发了before-rsolve.factory.resolver事件流,这节从resolver事件流开始讲. ...
- .26-浅析webpack源码之事件流make(1)
compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...
- .37-浅析webpack源码之事件流make(4)
赶紧完结这个系列咯,webpack4都已经出正式版了. 之前的代码搜索到js文件的对应loader,并添加到了对象中返回,流程如下: this.plugin("factory", ...
- 浅析libuv源码-node事件轮询解析(3)
好像博客有观众,那每一篇都画个图吧! 本节简图如下. 上一篇其实啥也没讲,不过node本身就是这么复杂,走流程就要走全套.就像曾经看webpack源码,读了300行代码最后就为了取package.js ...
随机推荐
- BOOTPROTO=[none|static|bootp|dhcp](引导时不使用协议|静态分配|BOOTP协议|DHCP协议)
BOOTPROTO=[none|static|bootp|dhcp](引导时不使用协议|静态分配|BOOTP协议|DHCP协议)
- Jmeter中java.net.URISyntaxException错误
今天在做服务发布性能测试的时候,傻傻的犯了个错,没有对参数进行仔细的检查,直接从fiddler中copy到jmeter中了,业务流程配置好后执行测试报错... jmeter中的响应结果如下: java ...
- Io 异常: The Network Adapter could not establish the connection
新接触一个项目,导入源码,在本地启动的时候后台报了一个错误: Could not discover the dialect to use. java.sql.SQLException: Io 异常: ...
- 手动编译protobuf3的C++源码
Windows下编译 官方文档 第三方文档 准备工具 Visual Studio 2013 CMake https://cmake.org/ Git https://git-scm.com/ 需要注意 ...
- 一、JavaSE语言概述
1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言 第二代:汇编语言 第三代语言:高级语言(面向过程-面向对象) 4.jav ...
- 鸟哥的linux私房菜学习-(五)Linux系统的在线求助man page与info page
1.man page man是manual(操作说明)的简写啦!只要下达:『man date』 马上就会有清楚的说明出现在你面前喔!如下所示: 进入man命令的功能后,你可以按下『空格键』往下翻页,可 ...
- java多线程(三)-Executors实现的几种线程池以及Callable
从java5开始,类库中引入了很多新的管理调度线程的API,最常用的就是Executor(执行器)框架.Executor帮助程序员管理Thread对象,简化了并发编程,它其实就是在 提供了一个中间层, ...
- 深入研究ES6 Generators
ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 如果你还不知道 ...
- Java学习笔记14---this作为返回值时返回的是什么
有时会遇到this作为返回值的情况,那么此时返回的到底是什么呢? 返回的是调用this所处方法的那个对象的引用,读起来有点绕口哈,有没有想起小学语文分析句子成份的试题,哈哈. 一点点分析的话,主干是& ...
- sqlite ef6 踩坑
调试的时候配置写如下,这样写是没有问题的但是在实际环境中有问题,因为EF路径找不到.会提示错误:The underlying provider failed on open <connectio ...