上一篇文章我写了tapable的基本用法,我们知道他是一个增强版版的发布订阅模式,本文想来学习下他的源码。tapable的源码我读了一下,发现他的抽象程度比较高,直接扎进去反而会让人云里雾里的,所以本文会从最简单的SyncHook和发布订阅模式入手,再一步一步抽象,慢慢变成他源码的样子。 本文 ...
Tapable工具 完成webpack默认参数注入后,下一步虽然是new Compiler ,但是这东西不是一下可以讲完的,复杂的一批。 不如先从工具入手,分块讲解compiler,首先来看看事件流执行器Tapable工具。 tips:这里的Tapable源码来自于webpack内部自带的tapable,如果通过npm i tapable查看会发现完全不一样。 出现地点如下: 可以看到核心对象基本 ...
2017-12-14 15:34 1 1314 推荐指数:
上一篇文章我写了tapable的基本用法,我们知道他是一个增强版版的发布订阅模式,本文想来学习下他的源码。tapable的源码我读了一下,发现他的抽象程度比较高,直接扎进去反而会让人云里雾里的,所以本文会从最简单的SyncHook和发布订阅模式入手,再一步一步抽象,慢慢变成他源码的样子。 本文 ...
_ 阅读目录 一:理解Sync类型的钩子 1. SyncHook.js 2. SyncBailHook.js ...
此系列随时可能断更,毕竟我是解释型源码分析…… tips:本系列源码版本为3.10.0 尝试看过Spring的源码,有点烧脑,所以还是重回JS吧! 在配置完环境变量后,可以通过webpack指令进行打包,需要知道的是,如果当前路径存在webpack ...
先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: 分别为配置文件和入口JS文件,内容弄个简单的。 接下来在当前目录执行webpack --config config.js,会输出一个output.js,简化后 ...
解决掉了最头疼的DirectoryWatcher内部实现,这一节可以结束NodeWatchFileSystem模块。 关于watch的应用场景,仔细思考了下,这不就是热重载的核心嘛。 ...
写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂。 既然是浅析,那么案例就不必太复杂,所以继续按照之前vue源码,以最简单形式进行源码分析,如下: 配置文件 ...
validateSchema模块 首先来看错误检测: 可以注意到,这里传了两个参数,其实第一个参数来源于一个JSON文件: 这个JSON文件非常大, ...
前不久写了一篇webpack基本原理和AST用法的文章,本来想接着写webpack plugin的原理的,但是发现webpack plugin高度依赖tapable这个库,不清楚tapable而直接去看webpack plugin始终有点雾里看花的意思。所以就先去看了下tapable的文档和源码 ...