随笔分类 - webpack源码系列
摘要：第一步处理rule为字符串，直接返回一个包装类，很简单看注释就好了。 test/include/exclude 然后处理test、include、exclude，如下： checkResourceSource直接看源码： 这个用于检测配置来源的唯一性，后面会能看到作用，同样作用的还有checkUse
阅读全文
摘要：Tips：写到这里，需要对当初的规则进行修改。在必要的地方，会在webpack.config.js中设置特殊的参数来跑源码，例如本例会使用module:{rules:[...]}来测试，基本上测试参数均取自于vue脚手架(太复杂的删掉)。 下面两节的主要流程图如下： 在进入compile方法后，迎面
阅读全文
摘要：本节流程如图： 现在正式进入打包流程，起步方法为run： 为什么不介绍compiler对象？因为构造函数中并没有一个初始化的方法，只是普通的变量声明，没啥好讲的。 在run方法中，首先是调用了tapable的applyPluginsAsync执行了before-run事件流，该事件流的定义地点如下：
阅读全文
摘要：这节把编译打包后的流程梳理一下，然后集中处理compile。 之前忽略了一个点，如下： 在compiler对象的fs模块挂载完后，会对传入的插件进行加载，这个过程在内置插件加载之前。 插件部分单独讲解，所以这个地方先暂时略过。 剩余流程如图： 内置插件全部plugin完毕后，会检测编译的回调函数：
阅读全文
摘要：总体过了一下后面的流程，发现Compiler模块确实不适合单独讲解，这里继续讲解后面的代码： 这行代码与之前设置options默认值非常相似，但是复杂程度根本不是一个次元的。 这一节只能简单的看一眼内部到底有多少东西，整理后源码如下： 这个模块除去父类引入，其余插件光顶部引入就有34个，简直就是插件
阅读全文
摘要：解决掉了最头疼的DirectoryWatcher内部实现，这一节可以结束NodeWatchFileSystem模块。 关于watch的应用场景，仔细思考了下，这不就是热重载的核心嘛。 首先是监视文件，触发文件change事件后收集变动文件信息，重新进行打包，更新JS后触发页面重新渲染，perfect
阅读全文
摘要：从模块流可以看出，这个NodeWatchFileSystem模块非常深，这里暂时不会深入到chokidar模块，有点太偏离本系列文章了，从WatcherManager开始讲解。 流程如图： 源码非常简单，包括一个工厂函数与两个原型方法，整理如下： 包含一个容器类和三个实例方法，每一次调用watchF
阅读全文
摘要：剩下一个watch模块，这个模块比较深，先大概过一下整体涉及内容再分部讲解。 流程图如下： NodeWatchFileSystem 除去细节代码，该模块大体如下； 1、引入Watchpack模块 2、接受一个inputFileSystem作为构造函数的参数 3、根据配置选项实例化一个Watchpac
阅读全文
摘要：至此已完成NodeJsInputFileSysten模块的讲解，下一步就是实际实用的模块： 挂载到compiler对象上的输入模块其实是带有缓存的输入模块，源码整理如下(用ES6的class重写)： 这里的核心是利用Storage来生成一个缓存容器，缓存对应的读操作。 有两个需要注意的地方。 一个是
阅读全文
摘要：在cachedInput、output、watch三大文件系统中，output非常简单，没有必要讲，其余两个模块依赖于input模块，而input主要是引用了graceful-fs的部分API，所以这节来讲讲graceful-fs。 上一节整理的源码如下： 内容包含： 1、工具方法 2、patch引
阅读全文
摘要：介绍Compiler的构造比较无趣，不如先过后面的，在用到compiler的时候再做讲解。 这一节主要讲这行代码： 这个构造了一个NodeEnvironmentPlugin对象并调用apply对compiler进行操作。 流程图： 模块源码如下： 除去添加事件流，其余几步都是在compiler对象上
阅读全文
摘要：Tapable工具 完成webpack默认参数注入后，下一步虽然是 new Compiler() ，但是这东西不是一下可以讲完的，复杂的一批。 不如先从工具入手，分块讲解compiler，首先来看看事件流执行器Tapable工具。 tips：这里的Tapable源码来自于webpack内部自带的ta
阅读全文
摘要：WebpackOptionsDefaulter模块 通过参数检测后，会根据单/多配置进行处理，本文基于单配置，所以会进行到如下代码： 模块的作用是进行默认值的设置，流程图如下： 进入该模块： 可以看到，这个模块的内容是用ES6的新语法写的，很好理解，因为这个模块是只是针对webpack的默认设置，所
阅读全文
摘要：validateSchema模块 首先来看错误检测： 可以注意到，这里传了两个参数，其实第一个参数来源于一个JSON文件： 这个JSON文件非常大，可以观察一下部分内容： 从描述可以猜测，这里的key对应options中的key，value就是检测方式。 比如说entry放到required代表是必
阅读全文
摘要：从convert-argv出来后，目前进度在这： 声明了一个熟悉的ifArg函数后进入了processOptions函数，接下来是根据一些命名参数处理那个outputOptions属性，我怎么都找不到这个在哪里定义的，知道的人提醒一下。 因此，直接进入webpack主函数，传入返回的options对
阅读全文
摘要：上一节看了一眼预编译的总体代码，这一节分析convert-argv模块。 这个模块主要是对命令参数的解析，也是yargs框架的核心用处。 生成默认配置文件名数组 函数内部，首先判断了argv.d与argv.p属性是否存在，这个属性来源于参数d与p，即webpack -d -p，测试如图： 因为懒得加
阅读全文
摘要：写在前面： 本来一开始想沿用之前vue源码的标题：webpack源码之***，但是这个工具比较巨大，所以为防止有人觉得我装逼跑来喷我(或者随时鸽)，加上浅析二字，以示怂。 既然是浅析，那么案例就不必太复杂，所以继续按照之前vue源码，以最简单形式进行源码分析，如下： 配置文件config.js： 入
阅读全文
摘要：先不进源码，分析一下打包后的文件，来一张图： 首先创建两个JS文件，内容如下： 分别为配置文件和入口JS文件，内容弄个简单的。 接下来在当前目录执行webpack --config config.js，会输出一个output.js，简化后内容如下： 可以看到，这是一个IIFE，可以利用闭包来对模块进
阅读全文
摘要：此系列随时可能断更，毕竟我是解释型源码分析…… tips：本系列源码版本为3.10.0 尝试看过Spring的源码，有点烧脑，所以还是重回JS吧！ 在配置完环境变量后，可以通过webpack指令进行打包，需要知道的是，如果当前路径存在webpack.config.js文件，会被默认指定为配置JS文件
阅读全文
浙公网安备 33010602011771号