本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now(); const onCompiled = (err, compilation) => { /**/ }; this.applyPluginsAsync("before-run", this, err => { if (err) return callback(err); th…

这里的编译前指的是开始触发主要的事件流this-compilaiton.compilation之前,由于还有一些准备代码,这一节全部弄出来. 模块基本上只走构造函数,具体的方法调用的时候再具体讲解. 上一节NormalModuleFactory模块的构造函数中,在处理完rules后,注入两个事件流就结束了,所以可以回到如下代码: createNormalModuleFactory() { // 构造完成 const normalModuleFactory = new NormalModuleFa…

Tips:写到这里,需要对当初的规则进行修改.在必要的地方,会在webpack.config.js中设置特殊的参数来跑源码,例如本例会使用module:{rules:[...]}来测试,基本上测试参数均取自于vue脚手架(太复杂的删掉). 下面两节的主要流程图如下: 在进入compile方法后,迎面而来的就是这么一行代码: const params = this.newCompilationParams(); 简单看一下方法,源码如下: Compiler.prototype.newCompila…

第一步处理rule为字符串,直接返回一个包装类,很简单看注释就好了. test/include/exclude 然后处理test.include.exclude,如下: if (rule.test || rule.include || rule.exclude) { // 标记使用参数 checkResourceSource("test + include + exclude"); // 没有就是undefined condition = { test: rule.test, incl…

从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译现有的代码 51ak带你看MYSQL5.7源码3:修改代码实现你的第一个Mysql版本 去MYSQL官网下源码:https://dev.mysql.com/downloads/mysql/ 选 SOURCE  CODE 下载解压.选VS code来查看, 用VS打开发现这些目录 ,根据了解到的目录结…

简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态都是佛系心态,祈祷中间不要出问题,不然找问题都要找半天,还不如不打包.尤其是loader和plugin的运行机制,这两个是在什么时候触发的,作用于webpack哪一个环节?这些都是需要熟悉webpack源码才能有答案的问题. 大家就跟着我一步步揭开webpack的神秘面纱吧. 如何调试webpack…

waterfall函数会连续执行数组中的函数,每次通过数组下一个函数的结果.然而,数组任务中的任意一个函数结果传递失败,那么该函数的下一个函数将不会执行,并且主回调函数立马把错误作为参数执行. 以上是我翻译的,我都不知道翻译的什么鬼. 其实该函数的作用就是: 上一个异步函数返回结果可以传给下一个异步函数,如果传递过程中,第一个参数出错了也就是真值的话,下一个回调函数将会停止调用,并且直接调用waterfall函数的第二个参数,其实也是个回调函数.并且把错误的参数传过去. 先看看官网的demo:…

新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolver", () => (data, callback) => { // ... asyncLib.parallel( /*...*/ , /* results: [ [], { resourceResolveData: { context: { issuer: '', compiler:…

声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这个实现主要的作用是分词的筛选,提高逐个匹配的效率 我们不直接看代码的实现,通过简单的实现描述下原理: 以下是个人的理解,如果有错误欢迎指出! Javascript有预编译与我们说的编译函数是不同的概念 什么是JavaScript的“预编译”? function Aaron() { alert("he…

在上一节中,最后返回了一个resolver,本质上就是一个Resolver对象: resolver = new Resolver(fileSystem); 这个对象的构造函数非常简单,只是简单的继承了Tapable,并接收了fileSystem参数: function Resolver(fileSystem) { Tapable.call(this); this.fileSystem = fileSystem; } module.exports = Resolver; resolve 而在mak…