zoukankan      html  css  js  c++  java
  • webpack源码-依赖收集

    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钩子 在HarmonyImportDependencyParserPlugin.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的模块。

  • 相关阅读:
    一些可以参考的常用工具库类整理
    Java(Android)线程池 总结
    JAVA泛型
    设计模式总结
    原型模式
    工厂模式与抽象工厂模式
    组合模式
    适配器模式
    建造者模式
    外观模式
  • 原文地址:https://www.cnblogs.com/walkermag/p/webpack-yuan-mayi-lai-shou-ji.html
Copyright © 2011-2022 走看看