文章目录
webpack 的作用是将源代码编译(构建、打包)成最终代码
整个过程大致分为三个步骤:
- 初始化
- 编译
- 输出
1、初始化–融合CLI参数、配置文件、默认配置
此阶段,webpack会将CLI参数、配置文件、默认配置
进行融合,形成一个最终的配置对象。
对配置的处理过程是依托一个第三方库yargs完成的
此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备
目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置
2、编译–生成总的资源列表
1、创建chunk - 根据入口模块创建一个chunk
chunk是webpack在内部构建过程中的一个概念,译为块,它表示通过某个入口找到的所有依赖的统称
,eg:通过入口文件./src/index.js 找到依赖./src/a.js 又找到./src/b.js, 这3个模块统称为一个chunk
。
根据入口模块(默认为./src/index.js)创建一个chunk
每个chunk都有至少两个属性:
- name:
默认为main
- id:
唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
每一个chunk都有名字的,这意味着chunk有可能有多个
的;
2、构建所有依赖模块 -生成模块列表(模块id:转换后代码)
- 这个
编译的过程,不会运行模块里的代码,只是读取文件内容,记录成表格
- AST抽象语法树–树形结构遍历,找到所有依赖,以数组的形式["./src/a.js","./src/b.js"]存到dependencies里
- 替换依赖函数,eg:把
require("./a")
改成_webpack_require("./src/a.js")
,我们改动后的代码叫转换后的代码
–字符串格式 - 通过找依赖,最终形成chunk中模块记录表格,里面存了所有
模块id(模块路径)
和模块转换后的代码
AST在线测试工具
简图
在chunk中生成多个模块,每个模块包含了模块id和模块转换后的代码
3、产生chunk assets - 根据模块列表生成文件列表
在第二步完成后,chunk中会产生一个模块列表,列表中包含了模块id和模块转换后的代码
接下来,webpack会根据配置为chunk生成一个资源列表,即chunk assets
,资源列表可以理解为是生成到最终文件的文件名和文件内容
chunk hash
是根据所有chunk assets的内容生成的一个hash字符串
hash:一种算法
,具体有很多分类,特点是将一个任意长度的字符串转换为一个固定长度的字符串
,而且可以保证原始内容不变,产生的hash字符串就不变
,用来验证一个文件内容有没有变化;
简图
- 通过入口创建一个chunk
- 编译出模块列表(所有依赖的模块id:转换后的代码)
- 根据模块列表 生成文件列表(资源列表)–
bundle(捆)
,可以认为资源列表中每一个资源就是一个bundle
4、合并chunk assets
将多个chunk的assets
合并到一起,并产生一个总的hash
多个入口就有多个chunk
3、输出emit
此步骤非常简单,webpack将利用node中的fs模块
(文件处理模块),根据编译产生的总的assets
,生成相应的文件。
总过程
涉及术语
- module:模块,分割的代码单元,webpack中的模块可以是任何内容的文件,不仅限于JS,可以是图片,css等
- chunk:webpack内部构建模块的块,
一个chunk中包含多个模块
,这些模块是从入口模块通过依赖分析得来的,一个chunk 对应一个入口模块 - bundle:chunk构建好模块后会生成chunk的
资源清单
,清单中的每一项就是一个bundle
,可以认为bundle就是最终生成的文件
- hash:
最终的资源清单
所有内容联合生成的hash值 - chunkhash:chunk生成的资源清单内容联合生成的hash值
- chunkname:chunk的名称,如果没有配置则使用main
- id:通常指chunk的唯一编号,如果在开发环境下构建,和chunkname相同;如果是生产环境下构建,则使用一个从0开始的数字进行编号
打包结果解读
如上图:
- hash–
最终的资源列表
内容生成的hash - version–webpack版本
- Time–构建时间
- 表格里:
asset – 资源,下面的项时资源列表里的每个资源项
size–资源大小
chunks – chunk id ,开发环境下id 和 名字一样都是main
chunk Name – chunk名称 Entrypoint 表示入口
, Entrypoint main 这个main 表示入口的chunk 的名字
, = 等号右边是输出
- 递归加载了2个模块,这是构建过程中依次加载的模块
注意:如果开启了watch–监控文件变化,每次文件变化后从2阶段–编译 开始重新走,不会再初始化了