webpack源码系列 - 随笔分类 - 书生小龙 - 博客园

PentaPass
204 阅读21分钟
原文链接： www.cnblogs.com

QH-Jimmy

随笔 - 120  文章 - 0  评论 - 48

随笔分类 - webpack源码系列

.39-浅析webpack源码之parser.parse 摘要: 因为换了个工作，所以博客停了一段时间。 这是上个月留下来的坑，webpack的源码已经不太想看了，又臭又长，恶心的要死，想去看node的源码……总之先补完这个 上一节完成了babel-loader对JS文件字符串的转换，最后返回后进入如下代码： 在看这个parse方法之前，需要过一下参数，首先是这个阅读全文 posted @ 2018-04-04 10:11 书生小龙 阅读(87) | 评论 (0) 编辑 .38-浅析webpack源码之读取babel-loader并转换js文件 摘要: 经过非常非常长无聊的流程，只是将获取到的module信息做了一些缓存，然后生成了loaderContext对象。 这里上个图整理一下这节的流程： 这一节来看webpack是如何将babel-loader与js文件结合的，首先总览一下runLoaders函数： 传入的4个参数都很直白： 1、待处理文件 阅读全文 posted @ 2018-03-02 17:51 书生小龙 阅读(65) | 评论 (0) 编辑 .37-浅析webpack源码之事件流make(4) 摘要: 赶紧完结这个系列咯，webpack4都已经出正式版了。 之前的代码搜索到js文件的对应loader，并添加到了对象中返回，流程如下： 这个对象的request将入口文件的路径与loader拼接起来并用！分割，所有的属性基本上都与路径相关。 after-resolve事件流 这里会触发after-re阅读全文 posted @ 2018-03-02 14:35 书生小龙 阅读(31) | 评论 (0) 编辑 .36-浅析webpack源码之Parser类 摘要: 眼看webpack4都出了，我还在撸3的源码，真的是捉急啊…… 不过现在只是beta版本，等出稳定版本后跑跑4的源码去。 之前漏了一个东西没有讲，如下： 在解析完入口文件路径与JS文件对应的babel-loader路径后，返回的包装对象多了一个parser属性，看似简单，实则麻烦的要死。 这里的参数阅读全文 posted @ 2018-02-28 14:43 书生小龙 阅读(58) | 评论 (2) 编辑 .35-浅析webpack源码之babel-loader入口文件路径读取 摘要: 哈哈，上首页真难，每次都被秒下，心疼自己1秒~ 这里补充一个简要图，方便理解流程： 在处理./input.js入口文件时，在类型判断被分为普通文件，所以走的文件事件流，最后拼接得到文件的绝对路径。 但是对应"babel-loader"这个字符串，在如下正则中被判定为模块类型： 因此，参考第33节的流阅读全文 posted @ 2018-02-24 12:45 书生小龙 阅读(82) | 评论 (0) 编辑 .34-浅析webpack源码之事件流make(3) 摘要: 新年好呀~过个年光打游戏，function都写不顺溜了。 上一节的代码到这里了： 经过长长的resolve，最终也只是解析入口文件的合法路径信息，然后调用回调函数。 接下来分析回调函数是如何处理返回结果的： 返回的结果有两部分，一个是loader，一个是文件对应路径。 对于入口文件的当前解析，不存在阅读全文 posted @ 2018-02-23 11:31 书生小龙 阅读(80) | 评论 (0) 编辑 .33-浅析webpack源码之doResolve事件流(5) 摘要: file => FileExistsPlugin 这个事件流快接近尾声了，接下来是FileExistsPlugin，很奇怪的是在最后才来检验路径文件是否存在。 源码如下： 这里只是简单的对路径文件进行状态获取，然后判断是否存在？是否是文件？最后调用一个有message的doResolve方法进入到下 阅读全文 posted @ 2018-02-01 11:07 书生小龙 阅读(36) | 评论 (0) 编辑 .32-浅析webpack源码之doResolve事件流(4) 摘要: 流程图如下： 重回DescriptionFilePlugin 上一节最后进入relative事件流，注入地点如下： 这似曾相识的感觉，这不就是解析package.json的插件么，又调用了一次。 但是有一点点微妙的不同，第一次调用该插件时，request对象如下所示： 在经过几个插件的洗礼后，变成了 阅读全文 posted @ 2018-01-26 18:30 书生小龙 阅读(47) | 评论 (0) 编辑 .31-浅析webpack源码之doResolve事件流(3) 摘要: 放个流程图： 这里也放一下request对象内容，这节完事后如下(把vue-cli的package.json也复制过来了)： 上一节看到这： 这里接下来会调用runAfter方法，之前有讲解过这个，简单讲就是触发after-type的事件流，这里的type为parsed-resolve，即触发aft阅读全文 posted @ 2018-01-25 11:21 书生小龙 阅读(93) | 评论 (0) 编辑 .30-浅析webpack源码之doResolve事件流(2) 摘要: 这里所有的插件都对应着一个小功能，画个图整理下目前流程： 上节是从ParsePlugin中出来，对'./input.js'入口文件的路径做了处理，返回如下： 该插件调用完后，进入下一个事件流，开始跑跑parsed-resolve相关的了。 回头看了一眼28节的大流程图，发现基本上这些事件流都是串联起阅读全文 posted @ 2018-01-23 16:26 书生小龙 阅读(42) | 评论 (0) 编辑 .29-浅析webpack源码之doResolve事件流(1) 摘要: 在上一节中，最后返回了一个resolver，本质上就是一个Resolver对象： 这个对象的构造函数非常简单，只是简单的继承了Tapable，并接收了fileSystem参数： resolve 而在make事件流中，调用的正是该类的原型方法resolve，现在可以进行看一眼了： 需要注意的是，该方法 阅读全文 posted @ 2018-01-17 16:23 书生小龙 阅读(71) | 评论 (0) 编辑 .28-浅析webpack源码之compiler.resolvers 摘要: 原本该在过WebpackOptionsApply时讲解这个方法的，但是当时一不小心过掉了，所以在这里补上。 compiler.resolvers 该对象的三个方法均在WebpackOptionsApply中生成，代码如下： 由于调用的是一个工厂函数，所以用normal作为示例讲解。 其中参数中的re阅读全文 posted @ 2018-01-11 16:32 书生小龙 阅读(49) | 评论 (0) 编辑 .27-浅析webpack源码之事件流make(2) 摘要: 上一节跑到了NormalModuleFactory模块，调用了原型方法create后，依次触发了before-rsolve、factory、resolver事件流，这节从resolver事件流开始讲。 源码简化如下： 第一次进来这个函数传入的是entry，在这里对字符串进行正则校验与切割，一般情况下 阅读全文 posted @ 2018-01-10 18:33 书生小龙 阅读(41) | 评论 (0) 编辑 .26-浅析webpack源码之事件流make(1) 摘要: compilation事件流中，依然只是针对细节步骤做事件流注入，代码流程如图： 触发完compilation事件流后，会直接返回一个compilation对象，然后触发下一个事件流make。 make的来源在EntryOptionPlugin插件中，无论entry参数是单入口字符串、单入口数组、多 阅读全文 posted @ 2018-01-09 15:17 书生小龙 阅读(84) | 评论 (0) 编辑 .25-浅析webpack源码之事件流compilation(3) 摘要: 这一节跑下一批plugin。 希望不要跟上一节一样，全是plugin。 流程如图(看看流程图就行了，后面也没有什么内容)： EnsureChunkConditionsPlugin 这个看看就懂，不解释了。 RemoveParentModulesPlugin 难道又是另一批plugin么…… Remo阅读全文 posted @ 2018-01-08 18:03 书生小龙 阅读(77) | 评论 (1) 编辑 .24-浅析webpack源码之事件流compilation(2) 摘要: 下一个compilation来源于以下代码： 之前简单分析该处的apply，此处只看非数组单入口的情况，此时会引入SingleEntryDependency模块，与compilation相关的内容如下： 此处用到了ES6新加的数据结构Map，SingleEntryDependency是个没什么营养的阅读全文 posted @ 2018-01-08 16:04 书生小龙 阅读(72) | 评论 (0) 编辑 .23-浅析webpack源码之事件流compilation(1) 摘要: 正式开始跑编译，依次解析，首先是： 流程图如下： 这里是第一个compilation事件注入的地方，注入代码如下： 这里的requestShortener为FunctionModulePlugin的第二个参数，没有传所以是undefined。 options.output为传入的output参数，但阅读全文 posted @ 2018-01-03 00:40 书生小龙 阅读(84) | 评论 (0) 编辑 .22-浅析webpack源码之事件流compilation总览 摘要: 呃，终于到了这地方…… MMP，有31个函数，估计可以写到明年了。 这里先梳理所有事件的注入来源，经检测，全部来源于WebpackOptionsApply中，回到那个可怕的模块，梳理后如下： 还好都集中在一个地方，这样又可以写流水账了。 这里先要过一个地方，之前似乎遗留了： 这里注入了entry-o阅读全文 posted @ 2017-12-29 11:54 书生小龙 阅读(82) | 评论 (0) 编辑 .21-浅析webpack源码之事件流this-compilation 摘要: 上一节生成Compilation实例后，添加了一些属性，随后触发this-compilation事件流，如下： 事件流的名字this-compilation我想了半天也不懂啥意思，从其内容来看其实也只算是一个预编译，叫pre-compilation似乎更好。 总之先不管那么多，继续跑流程，流程图如下阅读全文 posted @ 2017-12-28 15:38 书生小龙 阅读(163) | 评论 (0) 编辑 .20-浅析webpack源码之compile流程-Template模块 摘要: 这里的编译前指的是开始触发主要的事件流this-compilaiton、compilation之前，由于还有一些准备代码，这一节全部弄出来。 模块基本上只走构造函数，具体的方法调用的时候再具体讲解。 上一节NormalModuleFactory模块的构造函数中，在处理完rules后，注入两个事件流就阅读全文 posted @ 2017-12-27 01:14 书生小龙 阅读(103) | 评论 (0) 编辑 .19-浅析webpack源码之compile流程-rules参数处理(2) 摘要: 第一步处理rule为字符串，直接返回一个包装类，很简单看注释就好了。 test/include/exclude 然后处理test、include、exclude，如下： checkResourceSource直接看源码： 这个用于检测配置来源的唯一性，后面会能看到作用，同样作用的还有checkUse阅读全文 posted @ 2017-12-26 01:30 书生小龙 阅读(199) | 评论 (0) 编辑 .18-浅析webpack源码之compile流程-rules参数处理(1) 摘要: Tips：写到这里，需要对当初的规则进行修改。在必要的地方，会在webpack.config.js中设置特殊的参数来跑源码，例如本例会使用module:{rules:[...]}来测试，基本上测试参数均取自于vue脚手架(太复杂的删掉)。 下面两节的主要流程图如下： 在进入compile方法后，迎面阅读全文 posted @ 2017-12-26 00:52 书生小龙 阅读(247) | 评论 (0) 编辑 .17-浅析webpack源码之compile流程-入口函数run 摘要: 本节流程如图： 现在正式进入打包流程，起步方法为run： 为什么不介绍compiler对象？因为构造函数中并没有一个初始化的方法，只是普通的变量声明，没啥好讲的。 在run方法中，首先是调用了tapable的applyPluginsAsync执行了before-run事件流，该事件流的定义地点如下：阅读全文 posted @ 2017-12-25 14:29 书生小龙 阅读(63) | 评论 (0) 编辑 .16-浅析webpack源码之编译后流程梳理 摘要: 这节把编译打包后的流程梳理一下，然后集中处理compile。 之前忽略了一个点，如下： 在compiler对象的fs模块挂载完后，会对传入的插件进行加载，这个过程在内置插件加载之前。 插件部分单独讲解，所以这个地方先暂时略过。 剩余流程如图： 内置插件全部plugin完毕后，会检测编译的回调函数： 阅读全文 posted @ 2017-12-23 16:03 书生小龙 阅读(50) | 评论 (0) 编辑 .15-浅析webpack源码之WebpackOptionsApply模块-plugin事件流总览 摘要: 总体过了一下后面的流程，发现Compiler模块确实不适合单独讲解，这里继续讲解后面的代码： 这行代码与之前设置options默认值非常相似，但是复杂程度根本不是一个次元的。 这一节只能简单的看一眼内部到底有多少东西，整理后源码如下： 这个模块除去父类引入，其余插件光顶部引入就有34个，简直就是插件阅读全文 posted @ 2017-12-21 16:05 书生小龙 阅读(136) | 评论 (0) 编辑 .14-浅析webpack源码之Watchpack模块 摘要: 解决掉了最头疼的DirectoryWatcher内部实现，这一节可以结束NodeWatchFileSystem模块。 关于watch的应用场景，仔细思考了下，这不就是热重载的核心嘛。 首先是监视文件，触发文件change事件后收集变动文件信息，重新进行打包，更新JS后触发页面重新渲染，perfect阅读全文 posted @ 2017-12-20 21:06 书生小龙 阅读(104) | 评论 (1) 编辑 .13-浅析webpack源码之WatcherManager模块 摘要: 从模块流可以看出，这个NodeWatchFileSystem模块非常深，这里暂时不会深入到chokidar模块，有点太偏离本系列文章了，从WatcherManager开始讲解。 流程如图： 源码非常简单，包括一个工厂函数与两个原型方法，整理如下： 包含一个容器类和三个实例方法，每一次调用watchF 阅读全文 posted @ 2017-12-19 22:50 书生小龙 阅读(54) | 评论 (0) 编辑 .12-浅析webpack源码之NodeWatchFileSystem模块总览 摘要: 剩下一个watch模块，这个模块比较深，先大概过一下整体涉及内容再分部讲解。 流程图如下： NodeWatchFileSystem 除去细节代码，该模块大体如下； 1、引入Watchpack模块 2、接受一个inputFileSystem作为构造函数的参数 3、根据配置选项实例化一个Watchpac阅读全文 posted @ 2017-12-18 19:02 书生小龙 阅读(90) | 评论 (0) 编辑 .11-浅析webpack源码之Storage模块 摘要: 至此已完成NodeJsInputFileSysten模块的讲解，下一步就是实际实用的模块： 挂载到compiler对象上的输入模块其实是带有缓存的输入模块，源码整理如下(用ES6的class重写)： 这里的核心是利用Storage来生成一个缓存容器，缓存对应的读操作。 有两个需要注意的地方。 一个是阅读全文 posted @ 2017-12-16 05:00 书生小龙 阅读(55) | 评论 (0) 编辑 .10-浅析webpack源码之graceful-fs模块 摘要: 在cachedInput、output、watch三大文件系统中，output非常简单，没有必要讲，其余两个模块依赖于input模块，而input主要是引用了graceful-fs的部分API，所以这节来讲讲graceful-fs。 上一节整理的源码如下： 内容包含： 1、工具方法 2、patch引阅读全文 posted @ 2017-12-16 00:24 书生小龙 阅读(317) | 评论 (0) 编辑 .9-浅析webpack源码之NodeEnvironmentPlugin模块总览 摘要: 介绍Compiler的构造比较无趣，不如先过后面的，在用到compiler的时候再做讲解。 这一节主要讲这行代码： 这个构造了一个NodeEnvironmentPlugin对象并调用apply对compiler进行操作。 流程图： 模块源码如下： 除去添加事件流，其余几步都是在compiler对象上阅读全文 posted @ 2017-12-15 13:06 书生小龙 阅读(120) | 评论 (0) 编辑 .8-浅析webpack源码之Tapable介绍 摘要: Tapable工具 完成webpack默认参数注入后，下一步虽然是 new Compiler() ，但是这东西不是一下可以讲完的，复杂的一批。 不如先从工具入手，分块讲解compiler，首先来看看事件流执行器Tapable工具。 tips：这里的Tapable源码来自于webpack内部自带的ta阅读全文 posted @ 2017-12-14 15:34 书生小龙 阅读(351) | 评论 (0) 编辑 .7-浅析webpack源码之WebpackOptionsDefaulter模块 摘要: WebpackOptionsDefaulter模块 通过参数检测后，会根据单/多配置进行处理，本文基于单配置，所以会进行到如下代码： 模块的作用是进行默认值的设置，流程图如下： 进入该模块： 可以看到，这个模块的内容是用ES6的新语法写的，很好理解，因为这个模块是只是针对webpack的默认设置，所阅读全文 posted @ 2017-12-13 22:39 书生小龙 阅读(117) | 评论 (0) 编辑 .6-浅析webpack源码之validateSchema模块 摘要: validateSchema模块 首先来看错误检测： 可以注意到，这里传了两个参数，其实第一个参数来源于一个JSON文件： 这个JSON文件非常大，可以观察一下部分内容： 从描述可以猜测，这里的key对应options中的key，value就是检测方式。 比如说entry放到required代表是必阅读全文 posted @ 2017-12-13 19:22 书生小龙 阅读(346) | 评论 (0) 编辑 .5-浅析webpack源码之入口函数 摘要: 从convert-argv出来后，目前进度在这： 声明了一个熟悉的ifArg函数后进入了processOptions函数，接下来是根据一些命名参数处理那个outputOptions属性，我怎么都找不到这个在哪里定义的，知道的人提醒一下。 因此，直接进入webpack主函数，传入返回的options对阅读全文 posted @ 2017-12-13 18:11 书生小龙 阅读(74) | 评论 (0) 编辑 .4-浅析webpack源码之convert-argv模块 摘要: 上一节看了一眼预编译的总体代码，这一节分析convert-argv模块。 这个模块主要是对命令参数的解析，也是yargs框架的核心用处。 生成默认配置文件名数组 函数内部，首先判断了argv.d与argv.p属性是否存在，这个属性来源于参数d与p，即webpack -d -p，测试如图： 因为懒得加阅读全文 posted @ 2017-12-12 00:11 书生小龙 阅读(360) | 评论 (1) 编辑 .3-浅析webpack源码之预编译总览 摘要: 写在前面： 本来一开始想沿用之前vue源码的标题：webpack源码之***，但是这个工具比较巨大，所以为防止有人觉得我装逼跑来喷我(或者随时鸽)，加上浅析二字，以示怂。 既然是浅析，那么案例就不必太复杂，所以继续按照之前vue源码，以最简单形式进行源码分析，如下： 配置文件config.js： 入阅读全文 posted @ 2017-12-11 16:14 书生小龙 阅读(169) | 评论 (0) 编辑 .2-浅析webpack源码之打包后文件 摘要: 先不进源码，分析一下打包后的文件，来一张图： 首先创建两个JS文件，内容如下： 分别为配置文件和入口JS文件，内容弄个简单的。 接下来在当前目录执行webpack --config config.js，会输出一个output.js，简化后内容如下： 可以看到，这是一个IIFE，可以利用闭包来对模块进阅读全文 posted @ 2017-12-11 01:46 书生小龙 阅读(127) | 评论 (0) 编辑 .1-浅析webpack源码之webpack.cmd 摘要: 此系列随时可能断更，毕竟我是解释型源码分析…… tips：本系列源码版本为3.10.0 尝试看过Spring的源码，有点烧脑，所以还是重回JS吧！ 在配置完环境变量后，可以通过webpack指令进行打包，需要知道的是，如果当前路径存在webpack.config.js文件，会被默认指定为配置JS文件阅读全文 posted @ 2017-12-10 14:52 书生小龙 阅读(231) | 评论 (8) 编辑

公告

昵称：书生小龙
园龄：2年5个月
粉丝：26
关注： 1 +加关注
< 2018年5月 >
日 一 二 三 四 五 六
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
3 4 5 6 7 8 9

搜索

   

常用链接

随笔分类

随笔档案

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Copyright ©2018 书生小龙
avatar
文章
阅读
粉丝