.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 ... 
随机推荐
- jQuery模块化开发
			//定义了命名空间. var Itcast = {}; //定义第二级别的 命名空间. var Itcast.Model = {}; var Itcast.Model.UIJs = (function ... 
- volatile作用及相关集合类
			在工作一年多之后,java程序员都会了解到volatile 这个修饰符, 其在多线程环境下解决了long/double写操作的原子性.基本变量的可见性.通过建立内存屏障保证指令有序性 那么在哪些Jav ... 
- Linux下防火墙配置
			查看防火墙的状态:/etc/init.d/iptables status 或 service iptables status 1) 临时生效,重启后复原 开启: service iptab ... 
- vim置于后台,vim 编辑多文件
			这里介绍一个很实用的方法:1.将vim置于后台,直接按 ctrl + z可以将当前的vim置于后台 2.然后可以去别的目录再打开一个 当你需要打开之前的vim的时候3.打jobs命令看当前有哪些vim ... 
- ORA-00600[17059]错误
			ORA-00600[17059] ORA-00600[17059]错误大部分都是因为高版本导致,对于本库的分析:因为该库的 shared pool老化比较频繁,到我介入的时候,发现相关该类此sql已经 ... 
- python pandas stack和unstack函数
			在用pandas进行数据重排时,经常用到stack和unstack两个函数.stack的意思是堆叠,堆积,unstack即"不要堆叠",我对两个函数是这样理解和区分的. 常见的数据 ... 
- chromedriver与chrome版本映射列表
			chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ... 
- 用grant命令为用户赋权限以后,登录时,出现:ERROR 1045 (28000)
			ERROR 1045(28000)信息是因为权限的问题.这个ERROR分为两种情况: 第一种: ERROR 1045 (28000): Access denied for user 'root'@'l ... 
- MySQL之表操作
			1 创建表 2 查看表结构 3 数据类型 4 表完整性约束 5 修改表 6 复制表 7 删除表 一创建表 语法: create table 表名( 字段名1 类型[(宽度) 约束条件], 字段名2 ... 
- SGML/HTML/XML之间的关系
			1 历史起源 SGML--1986年国际标准化组织出版发布了一个信息管理方面的国际标准(ISO 8879:1986信息处理). HTML 2.0--1995年11月作为RFC 1866发布 XML 1 ... 
