- 博客(12)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 webpack 4 源码主流程分析（九）：优化 chunk
创建了 hash，包括 module hash，chunk hash，content hash，fullhash，hash。
2023-03-09 23:08:58
263
转载 webpack 4 源码主流程分析（八）：生成 chunk
处理异步模块的时候，queue 里的 block 为 ImportDependenciesBlock 依赖，然后更新 chunkGroup 后， switch 走 PROCESS_BLOCK 获得本次异步对应的真正模块，后面的处理数据都将在新的 ChunkGroup 信息对象上。解析了所有第一层异步(即非嵌套异步模块)的 module，并为每个不同的异步 mudule 都新建了 chunkGroup 和 chunk 并建立了两者的联系。存于 compilation.chunkGroups。
2023-03-09 23:07:58
296
转载 webpack 4 源码主流程分析（七）：构建 module（下）
然后回到文件 Compilation.js 的 module.build 的回调。先初始化了 hash， 然后分别 update 了 source，this._value（ this._source.updateHash(hash) 获得，为文件源码），meta，this.buildMeta，最后计算出结果挂载到 module._buildHash 上。上述执行结束后，会根据 import/export 的不同情况即模块间的相互依赖关系，在对应的 module.dependencies 上增加相应的依赖。
2023-03-09 23:06:56
183
转载 webpack 4 源码主流程分析（五）：reslove 流程
包括：UnsafeCachePlugin，ParsePlugin，DescriptionFilePlugin，NextPlugin，AliasPlugin，AliasFieldPlugin，ModuleKindPlugin，SymlinkPlugin 等等，完成各自的插件操作。实例化之后，触发 NormalModuleFactory.hooks:parser for (type)，会去注册一些在 parser 阶段（遍历解析 ast 的时候）被触发的 hooks。
2023-03-09 23:04:23
326
转载 webpack 4 源码主流程分析（六）：构建 module（上）
实例化 NormalModule 得到初始化的 module（方法链：moduleFactory.create 回调里->buildModule->module.build->module.doBuild->runLoaders），然后在 build 过程中先 run loader 处理源码，得到一个编译后的字符串或 buffer。在 run loader 的过程中，先正序执行了每个 loader 的 pitch ，然后倒序执行了每个 loader 的 normal。还可以解析自定义 loader。
2023-03-09 23:03:53
184
转载 webpack 4 源码主流程分析（四）：reslove 前的准备
在方法中先触发 compiler.hooks: beforeRun，执行之前注册的 NodeEnvironmentPlugin（该插件此时判断 inputFileSystem 是否被配置，如未配置则执行 purge 清理方法），然后在回调里触发 compiler.hooks: run，然后回调里 this.readRecords 是用于读取之前的 records 的方法，再在它的回调里执行 this.compile(onCompiled)。用于提供不同的编译模板。
2023-03-09 23:01:34
129
转载 webpack 4 源码主流程分析（三）：编译前的准备
回到cli.js，处理配置项 progress 和 infoVerbosity，然后判断 options 里是否有 watch，有则走 compiler.watch，无则走 compiler.run，这里我们走compiler.run，进入 webpack 核心构建流程！然后注册了this._pluginCompat.tap("Compiler")，这个用来兼容之前的老版 webpack 的 plugin 的钩子，触发时机在tapable/lib/Tapable.js里调用plugin 的时候;
2023-03-09 22:59:35
84
转载 webpack 4 源码主流程分析（二）：配置初始化
通过在 cli 执行命令 webpack 开始，以 development 模式为例，暂时忽略支线剧情（错误响应，缓存等等），只分析探索 webpack 的打包主流程。
2023-03-09 22:58:29
165
转载 virtual-dom原理与简单实现
前言目前广为人知的React和Vue都采用了virtual-dom，Virtual DOM凭借其高效的diff算法，让我们不再关心性能问题，可以随心所欲的修改数据状态。在实际开发中，我们并不需要关心Virtual DOM是如何实现的，但是理解Virtual DOM的实现原理确实有必要的。本文是参照github.com/livoras/sim… 源码进行理解vitual DOM。一、前端
2017-12-01 22:02:46
2904
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人