webpack源码-依赖收集

Posted 2021-03-24 刨根

webpack源码-依赖收集

version:3.12.0

程序主要流程：

• 触发make钩子 Compilation.js
  
• 执行EntryOptionPlugin 中注册的make钩子
• 执行compilation.addEntry
• 执行compilation._addModuleChain Compilation.js
• 执行moduleFactory.create(this.semaphore.avaiable 初始化为100) Compilation.js
• 执行this.buildModule Compilation.js
• 执行this.processModuleDependencies Compilation.js
• this.addModuleDependencies Compilation.js
• buildModule过程中，使用acorn将代码js代码转换为ast，分析require 和 import 语句，触发对应的钩子收集相关依赖。

require

触发 call require:commonjs:item 钩子，在CommonJsRequireDependencyParserPlugin.js 中

const dep = new CommonJsRequireDependency(param.string, param.range);
dep.loc = expr.loc;
dep.optional = !!parser.scope.inTry;
parser.state.current.addDependency(dep);

import

触发 program钩子 在HarmonyDetectionParserPlugin.js中

const module = parser.state.module;
const dep = new HarmonyCompatibilityDependency(module);
dep.loc = {
   start: {
      line: -1,
      column: 0
   },
   end: {
      line: -1,
      column: 0
   },
   index: -2
};
module.addDependency(dep);

每一个依赖(Dependency)的实体都包含一个module字段，指向被依赖的Module. 这样通过Module的dependencies数组成员就能找出该模块所依赖的其它模块。 webpack使用不同的Dependency子类，如AMDRequireDependency ，AMDDefineDependency ，AMDRequireArrayDependency，CommonJsRequireDependency，SystemImportDependency来表式不同的模块加载规范， 通过对应的DependencyParserPlugin来加载 AMD或CMD的模块。