.25-浅析webpack源码之事件流compilation(3)
这一节跑下一批plugin。
compiler.apply(
new EnsureChunkConditionsPlugin(),
new RemoveParentModulesPlugin(),
new RemoveEmptyChunksPlugin(),
new MergeDuplicateChunksPlugin(),
new FlagIncludedChunksPlugin(),
new OccurrenceOrderPlugin(true),
new FlagDependencyExportsPlugin(),
new FlagDependencyUsagePlugin()
);
希望不要跟上一节一样,全是plugin。
流程如图(看看流程图就行了,后面也没有什么内容):

EnsureChunkConditionsPlugin
class EnsureChunkConditionsPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
const triesMap = new Map();
compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], (chunks) => { /**/ });
});
}
}
这个看看就懂,不解释了。
RemoveParentModulesPlugin
class RemoveParentModulesPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], (chunks) => { /**/ });
});
}
}
难道又是另一批plugin么……
RemoveEmptyChunksPlugin
class RemoveEmptyChunksPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], (chunks) => { /**/ });
});
}
}
是的。
MergeDuplicateChunksPlugin
class MergeDuplicateChunksPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
compilation.plugin("optimize-chunks-basic", (chunks) => { /**/ });
});
}
}
FlagIncludedChunksPlugin
class FlagIncludedChunksPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
compilation.plugin("optimize-chunk-ids", (chunks) => { /**/ });
});
}
}
OccurrenceOrderPlugin
class OccurrenceOrderPlugin {
// true
constructor(preferEntry) {
if (preferEntry !== undefined && typeof preferEntry !== "boolean") {
throw new Error("Argument should be a boolean.\nFor more info on this plugin, see https://webpack.js.org/plugins/");
}
this.preferEntry = preferEntry;
}
apply(compiler) {
const preferEntry = this.preferEntry;
compiler.plugin("compilation", (compilation) => {
compilation.plugin("optimize-module-order", (modules) => { /**/ });
compilation.plugin("optimize-chunk-order", (chunks) => { /**/ });
});
}
}
看到那个错误提示就想笑,这个插件除了你自己谁会去调用啊。
FlagDependencyExportsPlugin
class FlagDependencyExportsPlugin {
apply(compiler) {
compiler.plugin("compilation", (compilation) => {
compilation.plugin("finish-modules", (modules) => { /**/ });
function addToSet(a, b) { /**/ }
});
}
}
FlagDependencyUsagePlugin
class FlagDependencyUsagePlugin {
apply(compiler) {
compiler.plugin("compilation", compilation => {
compilation.plugin("optimize-modules-advanced", modules => { /**/ });
function addToSet(a, b) { /**/ }
function isSubset(biggerSet, subset) { /**/ }
});
}
}
总的来说,这一批plugin是针对模块的,不过仍然没有任何实际行为。
还剩下3个也一并过了吧。
TemplatedPathPlugin
class TemplatedPathPlugin {
apply(compiler) {
compiler.plugin("compilation", compilation => {
const mainTemplate = compilation.mainTemplate;
mainTemplate.plugin("asset-path", replacePathVariables);
mainTemplate.plugin("global-hash", function(chunk, paths) { /**/ });
mainTemplate.plugin("hash-for-chunk", function(hash, chunk) { /**/ });
});
}
}
RecordIdsPlugin
class RecordIdsPlugin {
apply(compiler) {
compiler.plugin("compilation", compilation => {
compilation.plugin("record-modules", (modules, records) => { /**/ });
compilation.plugin("revive-modules", (modules, records) => { /**/ });
function getDepBlockIdent(chunk, block) { /**/ }
compilation.plugin("record-chunks", (chunks, records) => { /**/ });
compilation.plugin("revive-chunks", (chunks, records) => { /**/ });
});
}
}
WarnCaseSensitiveModulesPlugin
class WarnCaseSensitiveModulesPlugin {
apply(compiler) {
compiler.plugin("compilation", compilation => {
compilation.plugin("seal", () => { /**/ });
});
}
}
这里把所有compilation事件流触发完后,也只是针对不同的阶段再次进行plugin,所以详细过程还需要继续跑流程。
.25-浅析webpack源码之事件流compilation(3)的更多相关文章
- .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 ...
- .22-浅析webpack源码之事件流compilation总览
呃,终于到了这地方-- newCompilation(params) { // ... this.applyPlugins("this-compilation", compilat ...
- .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 ...
随机推荐
- MYSQL忘记root密码后如何修改
方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...
- lesson - 15 Linux系统日常管理4
内容概要:1. rsync 命令格式rsync [OPTION]... SRC DESTrsync [OPTION]... SRC [USER@]HOST:DESTrsync [OPTION].. ...
- Linux(CentOS6.5)修改默认yum源为国内的阿里云、网易yum源
官方的yum源在国内访问效果不佳. 需要改为国内比较好的阿里云或者网易的yum源 修改方式: echo 备份当前的yum源 mv /etc/yum.repos.d /etc/yum.repos.d.b ...
- Java容器---List
List 承诺可以将元素维护在特定的序列中.List 接口在Collection的基础上添加了大量的方法,使得可以在List的中间插入和移除元素. 有两种类型的List: -----基本的 ...
- APP开发选择什么框架好? 请看这里!
背景 App的开发一般都需要满足Android和iOS两个系统环境,也就意味着一个App需要定制两套实现方案,造成开发成本和维护成本都很高.为了解决这个问题,最好的办法就是实现一套代码跨端运行,所以H ...
- CentOS下LAMP环境安装配置
本来几下yum都能装好的,yum却出问题了,报错:AttributeError: 'YumBaseCli' object has no attribute '_not_found_i',可能是某个文件 ...
- ASP.NET Core学习之一 入门简介
一.入门简介 在学习之前,要先了解ASP.NET Core是什么?为什么?很多人学习新技术功利心很重,恨不得立马就学会了. 其实,那样做很不好,马马虎虎,联系过程中又花费非常多的时间去解决所遇到的“问 ...
- Head First设计模式之装饰者模式
一.定义 装饰者模式,英文叫Decorator Pattern,在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 动态将职责附加到 ...
- 每天学一点Docker(6)——镜像和DockerFile
镜像的分层结构: 实际上,Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的.比如我们现在构建一个新的镜像,Dockerfile 如下: ① 新镜像不再 ...
- numpy库常用基本操作
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...