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的模块。

webpack源码-依赖收集的更多相关文章

  1. 从Webpack源码探究打包流程,萌新也能看懂~

    简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...

  2. .3-浅析webpack源码之预编译总览

    写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...

  3. 原生JS研究:学习jquery源码,收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  4. .30-浅析webpack源码之doResolve事件流(1)

    这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...

  5. .17-浅析webpack源码之compile流程-入口函数run

    本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...

  6. .34-浅析webpack源码之事件流make(3)

    新年好呀~过个年光打游戏,function都写不顺溜了. 上一节的代码到这里了: // NormalModuleFactory的resolver事件流 this.plugin("resolv ...

  7. .30-浅析webpack源码之doResolve事件流(2)

    这里所有的插件都对应着一个小功能,画个图整理下目前流程: 上节是从ParsePlugin中出来,对'./input.js'入口文件的路径做了处理,返回如下: ParsePlugin.prototype ...

  8. 多flavor导致的源码依赖问题-- Cannot choose between the following configurations of project :sample:

    一.背景: 当我们在源码依赖的时候经常会导致一些问题. 我们的主工程有如下配置,它依赖了一个sample的本地工程 flavorDimensions "demo" productF ...

  9. .10-浅析webpack源码之graceful-fs模块

    在cachedInput.output.watch三大文件系统中,output非常简单,没有必要讲,其余两个模块依赖于input模块,而input主要是引用了graceful-fs的部分API,所以这 ...

随机推荐

  1. 点击提交按钮,屏幕会出现闪烁问题,element.style问题

    点击提交按钮,屏幕会出现闪烁问题 通过后台调试发现,在点击的按钮的时候会给body添加一个padding值,而且会出现怎么都修改不了的问题,会发现里面会有 element.style的值,这其实是一种 ...

  2. Python-16-分配参数

    与收集参数相反,这里用*和**分配参数   def add(x, y):          return x + y   使用*分配元组 params = (1, 2) >>> ad ...

  3. git 远程分支和tag标签的操作

    git远程分支操作:1.创建远程分支git push --set-upstream origin develop:develop2在服务器创建远程分支devlop2,让本地的develop分支和dev ...

  4. .NET Core请求控制器Action方法正确匹配,但为何404?

    前言 有些时候我们会发现方法名称都正确匹配,但就是找不到对应请求接口,所以本文我们来深入了解下何时会出现接口请求404的情况. 匹配控制器Action方法(404) 首先我们创建一个web api应用 ...

  5. 基于jQuery的打字机函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. mysql 主键自增设置,插入数据就不必再设置了。

    (完)

  7. 很实用的h5实现名片扫描识功能快速结合市场运营

    功能描述: 点击名片识别按钮,将名片上的个人信息扫描并解析出来显示. 实现步骤: 1.点击第一个页面上的名片识别按钮,调出手机摄像头和相册,让用户进行选择 2.获取照片或者图片的base64数据,传值 ...

  8. NOI 2003 逃学的小孩 (树的直径)

    [NOI2003 逃学的小孩] 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一 ...

  9. JSOI2016 病毒感染(动态规划)

    题目传送门:洛谷P5774 思路来源:郭大佬(我就是凑不要脸的白嫖党 : P) 题目分析: 我们一点点来分析这道题: 起点固定为1号,所有村庄是按线性排列的,而不是图,所以我们应该用线性DP(废话 ) ...

  10. Bank Hacking题解

    题目: 题意: 有一颗树,你可以断开点(第一个随便断,以后只能是和已经断开的点相临的点),每个点有权值,断开之后,经一条边和两条边可以到达的节点权值加一,问到最后出现过的最大的权值. 分析: 为啥断开 ...