下一个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)的更多相关文章

  1. .23-浅析webpack源码之事件流compilation(1)

    正式开始跑编译,依次解析,首先是: compiler.apply( new JsonpTemplatePlugin(options.output), // start new FunctionModu ...

  2. .22-浅析webpack源码之事件流compilation总览

    呃,终于到了这地方-- newCompilation(params) { // ... this.applyPlugins("this-compilation", compilat ...

  3. .25-浅析webpack源码之事件流compilation(3)

    这一节跑下一批plugin. compiler.apply( new EnsureChunkConditionsPlugin(), new RemoveParentModulesPlugin(), n ...

  4. .21-浅析webpack源码之事件流this-compilation

    上一节生成Compilation实例后,添加了一些属性,随后触发this-compilation事件流,如下: Compiler.prototype.newCompilation = (params) ...

  5. .34-浅析webpack源码之事件流make(3)

    新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolv ...

  6. .26-浅析webpack源码之事件流make(1)

    compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...

  7. .27-浅析webpack源码之事件流make(2)

    上一节跑到了NormalModuleFactory模块,调用了原型方法create后,依次触发了before-rsolve.factory.resolver事件流,这节从resolver事件流开始讲. ...

  8. .37-浅析webpack源码之事件流make(4)

    赶紧完结这个系列咯,webpack4都已经出正式版了. 之前的代码搜索到js文件的对应loader,并添加到了对象中返回,流程如下: this.plugin("factory", ...

  9. 浅析libuv源码-node事件轮询解析(3)

    好像博客有观众,那每一篇都画个图吧! 本节简图如下. 上一篇其实啥也没讲,不过node本身就是这么复杂,走流程就要走全套.就像曾经看webpack源码,读了300行代码最后就为了取package.js ...

随机推荐

  1. cat/tac/more/less 命令详解

    cat:(http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html) *cat主要有三大功能:1.一次显示整个文件:cat filena ...

  2. 根据NPOI 读取一个excel 文件的多个Sheet

    大家都知道NPOI组件可以再你本地没有安装office的情况下来 读取,创建excel文件.但是大家一般都是只默认读取一个excel文件的第一个sheet.那么如果要读取一个excel 的所有shee ...

  3. Java容器---List

          List 承诺可以将元素维护在特定的序列中.List 接口在Collection的基础上添加了大量的方法,使得可以在List的中间插入和移除元素. 有两种类型的List: -----基本的 ...

  4. pc端常用导航

    应为经常要写网站,导航部分基本一样,没必要每次都写一遍,下次直接来复制: HTML: <nav> <div class="clearfix container"& ...

  5. js控制图片自动缩放,实现铺满盒子,不变形,完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  6. 封装简单的equery

    /** * Created by wang on 2016/3/23. */ //绑定操作 function bindEvent(obj,events,fn){ if (obj.addEventLis ...

  7. PHP函数register_shutdown_function的使用

    函数简介当PHP程序执行完成后,自动执行register_shutdown_function函数,该函数需要一个参数,用来指定由谁处理这些后续的工作.其中,程序执行完成,分为以下几种情况:第一种:ph ...

  8. Java学习笔记7---父类构造方法有无参数对子类的影响

    子类不继承父类的构造方法,但父类的构造方法对子类构造方法的创建有影响.具体来说就是: ①.当父类没有无参构造方法时,子类也不能有无参构造方法:且必须在子类构造方法中显式以super(参数)的形式调用父 ...

  9. commons -lang(2) RandomStringUtils RandomUtils

    上一篇是StringUtils 链接http://www.cnblogs.com/tele-share/p/8060129.html 1.RandomStringUtils 1.1模拟实现random ...

  10. windows 堆管理

    windows堆管理是建立在虚拟内存管理的基础之上的,每个进程都有独立的4GB的虚拟地址空间,其中有2GB的属于用户区,保存的是用户程序的数据和代码,而系统在装载程序时会将这部分内存划分为4个段从低地 ...