webpack编译过程
webpack的作用是将源代码编译(构建、打包)成最终代码。整个过程大致分为三个步骤:初始化、编译、输出。1.初始化在该阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的。此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备。目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置2.编译1)创建chu
webpack的作用是将源代码编译(构建、打包)成最终代码。整个过程大致分为三个步骤:初始化、编译、输出。
1.初始化
在该阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的。此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备。目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置
2.编译
1)创建chunk
chunk是webpack在内部构建过程中的一个概念,译为:块,表示通过某个入口找到的所有依赖的统称。每个chunk至少有两个属性:
A)name,默认为main;
B)id,唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
2)构建所有依赖模块
3)产生chunk assets
在第二步完成后,chunk中会产生一个模块列表,列表中包含了模块id和模块转换后的代码 。接下来,webpack会根据配置为chunk生成一个资源列表,即chunk assets,资源列表可以理解为是生成到最终文件的文件名和文件内容
hash:一种算法,具体有很多分类,特点是将一个任意长度的字符串转换为一个固定长度的字符串,而且可以保证原始内容不变,产生的hash字符串就不变。
chunk hash是根据所有chunk assets的内容生成的一个hash字符串。
4)合并chunk assets
将多个chunk的assets合并到一起,并产生一个总的hash
3.输出
webpack将利用node中的fs模块(文件处理模块),根据编译产生的总的assets,生成相应的文件
4.涉及术语
1)module:模块,分割的代码单元,webpack中的模块可以是任何内容的文件,不仅限于JS
2)chunk:webpack内部构件模块的块,一个chunk中包含多个模块,这些模块是从入口模块通过依赖分析得来的
3)bundle:chunk构建好模块后会生成chunk的资源清单,清单中的每一项就是一个bundle,可以认为bundle就是最终生成的文件
4)hash:最终的资源清单所有内容联合生成的hash值
5)chunkhash:chunk生成的资源清单内容联合生成的hash值
6)chunkname:chunk的名称。如果没有配置则使用main
7)id:通常指chunk的唯一编号,如果在开发环境下构建,和chunkname相同;如果是生产环境下构建,则使用一个从0开始的数字进行编号
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)