阶段总结

• 使用hooks把主要阶段固定下来
• 插件自己选择阶段做事
• 入口是由入口插件（EntryPlugin.js）搞定的
• make → compiler → compilation → entry → dep → module
• 目前分析到 factory.create 这一行

FI

• webpack使用Tapable作为事件中心
• 将打包氛围env、compile、make、seal、emit 等几个阶段
• 在 make 阶段借助 acorn 对源代码进行了 parse

webpack 如何知道 index.js 依赖了哪些文件

• blockPreWalkStatement() 对 ImportDeclaration 进行了检查
• 一旦发现 import ‘xxx’，就会触发 import 钩子，对应的监听函数会处理依赖
• 其中 walkStatements() 对 ImportExpression 进行了检查
• 一旦发现 import(‘xxx’)，就会触发 importCall 钩子，对应的监听函数也会

怎么把 modules 合并成一个文件的

• compilation.seal()，该函数会创建 chunks、 为每个 chunk 进行 codeGeneration，然后为每个 chunk 创建 asset
• seal() 之后，emitAssets()、emitFiles() 会创建文件
• 最终得到 dist/main.js 和其他 chunk 文件 教训

总结webpack 怎么分析依赖和打包的

• 使用 JavascriptParser 对 index.js 进行 parse 得到 ast，然后遍历 ast
• 发现依赖声明就将其添加到 module 的 dependencies 或 blocks 中
• seal 阶段，webpack 将 mod ule 转为 chunk，可能会把多个 module 通过 codeGeneration 合并为一个 chunk
• seal 之后，为每个 chunk 创建文件，并写到硬盘上