QH-Jimmy

摘要： 第一步处理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引 阅读全文