.24-浅析webpack源码之事件流compilation(2)
下一个compilation来源于以下代码:
compiler.apply(new EntryOptionPlugin());
compiler.applyPluginsBailResult("entry-option", options.context, options.entry);
之前简单分析该处的apply,此处只看非数组单入口的情况,此时会引入SingleEntryDependency模块,与compilation相关的内容如下:
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
// ES6的Map
compilation.dependencyFactories.set(SingleEntryDependency, normalModuleFactory);
});
此处用到了ES6新加的数据结构Map,SingleEntryDependency是个没什么营养的类,之前简单讲过。
总的来说就是设置了compilation.dependencyFactories的一条属性。
下面是一长串的apply:
compiler.apply(
new CompatibilityPlugin(),
new HarmonyModulesPlugin(options.module),
new AMDPlugin(options.module, options.amd || {}),
new CommonJsPlugin(options.module),
new LoaderPlugin(),
new NodeStuffPlugin(options.node),
new RequireJsStuffPlugin(),
new APIPlugin(),
new ConstPlugin(),
new UseStrictPlugin(),
new RequireIncludePlugin(),
new RequireEnsurePlugin(),
new RequireContextPlugin(options.resolve.modules, options.resolve.extensions, options.resolve.mainFiles),
new ImportPlugin(options.module),
new SystemPlugin(options.module)
);
这一批注入了16个'compilation'事件。
其中大部分都还是给其他的属性注入事件流,所以下面的内容基本上只是保证源码完整而列出来,并没有什么东西。
看看流程图就行了,后面的内容全部可以跳过:

CompatibilityPlugin
class CompatibilityPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
// 这两个模块没什么讲的
compilation.dependencyFactories.set(ConstDependency, new NullFactory());
compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
params.normalModuleFactory.plugin("after-resolve", (data, done) => { /**/ });
});
}
}
这个插件给Map上设置的属性没看懂什么用,主要还是注入了2个事件,先做记录。
HarmonyModulesPlugin
class HarmonyModulesPlugin {
// options.module
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
compilation.dependencyFactories.set(HarmonyImportDependency, normalModuleFactory);
compilation.dependencyTemplates.set(HarmonyImportDependency, new HarmonyImportDependency.Template());
// ...大量set
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
设置了大量的属性,注入了一个parser事件……也没有什么动静。
AMDPlugin
class AMDPlugin {
// options.module,options.amd
constructor(options, amdOptions) {
this.amdOptions = amdOptions;
this.options = options;
}
apply(compiler) {
const options = this.options;
const amdOptions = this.amdOptions;
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
const contextModuleFactory = params.contextModuleFactory;
compilation.dependencyFactories.set(AMDRequireDependency, new NullFactory());
compilation.dependencyTemplates.set(AMDRequireDependency, new AMDRequireDependency.Template());
// more set...
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
compiler.plugin("after-resolvers", () => { /**/ });
}
}
先不管这里的set,总之这里依然是注入了一个parser事件。
CommonJsPlugin
class CommonJsPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
const options = this.options;
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
const contextModuleFactory = params.contextModuleFactory;
compilation.dependencyFactories.set(CommonJsRequireDependency, normalModuleFactory);
compilation.dependencyTemplates.set(CommonJsRequireDependency, new CommonJsRequireDependency.Template());
// set...
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
这两个插件从名字来看比较明了,但是具体行为还需要调用的时候做分析。
LoaderPlugin
class LoaderPlugin {
apply(compiler) {
// 属性设置
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
compilation.dependencyFactories.set(LoaderDependency, normalModuleFactory);
});
// plugin
compiler.plugin("compilation", (compilation) => {
compilation.plugin("normal-module-loader", (loaderContext, module) => { /**/ });
});
}
}
这个也没有任何操作,设置了一个属性,注入normal-module-loader事件。
NodeStuffPlugin
这个node参数的东西暂时不管了
RequireJsStuffPlugin
class RequireJsStuffPlugin {
apply(compiler) {
compiler.plugin("compilation", function(compilation, params) {
compilation.dependencyFactories.set(ConstDependency, new NullFactory());
compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
params.normalModuleFactory.plugin("parser", function(parser, parserOptions) { /**/ });
});
}
};
APIPlugin
class APIPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
compilation.dependencyFactories.set(ConstDependency, new NullFactory());
compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
params.normalModuleFactory.plugin("parser", parser => { /**/ });
});
}
}
ConstPlugin
class ConstPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
compilation.dependencyFactories.set(ConstDependency, new NullFactory());
compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template());
params.normalModuleFactory.plugin("parser", parser => { /**/ });
});
}
}
UseStrictPlugin
class UseStrictPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
params.normalModuleFactory.plugin("parser", (parser) => { /**/ });
});
}
}
RequireIncludePlugin
class RequireIncludePlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
compilation.dependencyFactories.set(RequireIncludeDependency, normalModuleFactory);
compilation.dependencyTemplates.set(RequireIncludeDependency, new RequireIncludeDependency.Template());
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
RequireEnsurePlugin
class RequireEnsurePlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
compilation.dependencyFactories.set(RequireEnsureItemDependency, normalModuleFactory);
compilation.dependencyTemplates.set(RequireEnsureItemDependency, new RequireEnsureItemDependency.Template());
compilation.dependencyFactories.set(RequireEnsureDependency, new NullFactory());
compilation.dependencyTemplates.set(RequireEnsureDependency, new RequireEnsureDependency.Template());
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
RequireContextPlugin
class RequireContextPlugin {
constructor(modulesDirectories, extensions, mainFiles) {
if (!Array.isArray(modulesDirectories))
throw new Error("modulesDirectories must be an array");
if (!Array.isArray(extensions))
throw new Error("extensions must be an array");
this.modulesDirectories = modulesDirectories;
this.extensions = extensions;
this.mainFiles = mainFiles;
}
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
const contextModuleFactory = params.contextModuleFactory;
const normalModuleFactory = params.normalModuleFactory;
compilation.dependencyFactories.set(RequireContextDependency, contextModuleFactory);
compilation.dependencyTemplates.set(RequireContextDependency, new RequireContextDependency.Template());
compilation.dependencyFactories.set(ContextElementDependency, normalModuleFactory);
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
params.contextModuleFactory.plugin("alternatives", (items, callback) => { /**/ });
params.contextModuleFactory.plugin("alternatives", (items, callback) => { /**/ });
params.contextModuleFactory.plugin("alternatives", (items, callback) => { /**/ });
});
}
}
这个插件还有点内容,构造函数中3个参数分贝代表模块文件夹、默认扩展名、主入口文件名。
ImportPlugin
class ImportPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
const options = this.options;
compiler.plugin("compilation", (compilation, params) => {
const normalModuleFactory = params.normalModuleFactory;
const contextModuleFactory = params.contextModuleFactory;
compilation.dependencyFactories.set(ImportDependency, normalModuleFactory);
compilation.dependencyTemplates.set(ImportDependency, new ImportDependency.Template());
// more set...
normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
SystemPlugin
class SystemPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.plugin("compilation", (compilation, params) => {
params.normalModuleFactory.plugin("parser", (parser, parserOptions) => { /**/ });
});
}
}
这一批的plugin基本上都是为normalModuleFactory注入parser事件,所以说编译行为还在准备中……
.24-浅析webpack源码之事件流compilation(2)的更多相关文章
- .23-浅析webpack源码之事件流compilation(1)
正式开始跑编译,依次解析,首先是: compiler.apply( new JsonpTemplatePlugin(options.output), // start new FunctionModu ...
- .22-浅析webpack源码之事件流compilation总览
呃,终于到了这地方-- newCompilation(params) { // ... this.applyPlugins("this-compilation", compilat ...
- .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 ...
- .26-浅析webpack源码之事件流make(1)
compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...
- .27-浅析webpack源码之事件流make(2)
上一节跑到了NormalModuleFactory模块,调用了原型方法create后,依次触发了before-rsolve.factory.resolver事件流,这节从resolver事件流开始讲. ...
- .37-浅析webpack源码之事件流make(4)
赶紧完结这个系列咯,webpack4都已经出正式版了. 之前的代码搜索到js文件的对应loader,并添加到了对象中返回,流程如下: this.plugin("factory", ...
- 浅析libuv源码-node事件轮询解析(3)
好像博客有观众,那每一篇都画个图吧! 本节简图如下. 上一篇其实啥也没讲,不过node本身就是这么复杂,走流程就要走全套.就像曾经看webpack源码,读了300行代码最后就为了取package.js ...
随机推荐
- ioutil包二
ioutil包二 (原创随笔,转载请注明出处 http://www.cnblogs.com/majianguo/p/8016426.html) ioutil包实现了一些I/O实用功能,导出了7个函数和 ...
- Notepad++使用教程
Notepad++ 快捷键 大全 Ctrl+C 复制Ctrl+X 剪切Ctrl+V 粘贴Ctrl+Z 撤消Ctrl+Y 恢复Ctrl+A 全选Ctrl+F 键查找对话框启动Ctrl+H 查找/替换对话 ...
- 使用 JSON.parse 反序列化 ISO 格式的日期字符串, 将返回Date格式对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【原创】java NIO FileChannel 学习笔记 新建一个FileChannel
首先使用FileChannel 的open方法获取一个FileChannel对象.下面这段代码是FileChannel中open方法的代码. public static FileChannel ope ...
- js 向form表单中插入数据
var newElement = document.createElement("input"); var nowtime=year+""+month+day+ ...
- C#语言和SQL Server第十章笔记
第十章 :使用关键字模糊查询 笔记 一:使用关键字 :LIKE BETWEEN IN进行模糊查询 通配符: 一类字符,代替一个或多个真正的字符 与LIKE关键字一起使用 通配符: 解释 实例 符 ...
- NET控件Designer架构设计
总体结构 Designer总体上由三大部分组成:View,ViewModel和Model,这个结构借鉴了流行的MVVM模式.这三部分的职责分工是: View 负责把ViewModel以图形的方式展现出 ...
- Head First设计模式之代理模式
一.定义 定义:为其他对象提供一种代理以控制对这个对象的访问 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 二.结构 代理模式一般会有三个角色: 抽象角色(Subject):指代 ...
- Composer创建和发送HTTP Request
Fiddler Composer的功能就是用来创建HTTP Request 然后发送. 你可以自定义一个Request, 也可以手写一个Request, 你甚至可以在Web会话列表中拖拽一个已有的Re ...
- wifipineapple插件:codeInject的使用
如果在中间人攻击的时候, 能在用户的网页中插入任意代码, 可以说已经完成一半了 wifipineapple有个codeInject插件, 可以让连上这个网络所有设备浏览网页的时候, 在网页中插入任意h ...