Korey

前面一至十一章，介绍了在 development 的模式下，整个完整了构建主流程。在了解构建流程的基础上，本章整理一些与 webpack 优化相关的知识点。 我们参考 production 模式里，里面已经做了大部分的优化，如压缩，Scope Hoisting， tree-sh…

前面分析了 webpack 的普通主流程构建，另外，通过设置 watch 模式，webpack 可以监听文件变化，当它们修改后会重新编译。文档 接下来设置 cli 命令加上 --watch 之后 对 watch 模式下的主流程进行分析（mode = development）。 …

以 前言及总流程概览 里的 demo 为例， 前十一张章分析了打包过程，现在来分析它打包后的文件。 @fe_korey/test-loader 是一个测试 loader，该 loader 作用为代码里的字符串 10000 替换为传入的 number。 入口文件，该文件名根据配置…

回到 seal。执行： 得到 this.fileDependencies, this.contextDependencies, this.missingDependencies 后，触发了一系列处理资源，优化资源的钩子之后，回到 Compiler.js 的 compile 里的…

这一步用于生成 module 资源。 在 createModuleAssets 里获取每个 module.buildInfo.assets，然后触发 this.emitAsset 生成资源。buildInfo.assets 相关数据可以在 loader 里调用 api: thi…

在 chunk 生成后，开始进行 chunk 优化之类的处理。 根据 module.id 给 module，chunk，reasons 等排序。 这一步主要用于设置 chunk.id，算法与 this.applyModuleIds 一致。 根据 chunk.id 给 modul…

执行 compilation.finish，触发 compilation.hooks：finishModules，执行插件 FlagDependencyExportsPlugin 注册的事件，作用是遍历所有 module 将 export 出来的变量以数组的形式，单独存储到 m…

runLoaders 运行结束后，回调里得到经 loader 编译后的模块代码字符串 result 和对应的 resourceBuffer。 在回调里执行了 createSource 后，判断 loader 的 result 是否有第三个参数对象并且里面存在 webpackAS…

这里触发 normalModuleFactory.hooks:createModule，如果钩子里没有项目配置的自定义 module，则使用 webpack 生成的 module。 得到 module 实例，接着触发 normalModuleFactory.hooks:modu…