webpack编译过程

webpack编译过程

初始化

复制代码
    此阶段,webpack会将**CLI参数**、**配置文件**、**默认配置**进行融合,形成一个最终的配置对象。

​ 对配置的处理过程是依托一个第三方库yargs完成的

​ 此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备

​ 目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置
2.

编译

  1. 创建chunk

    • 它通过入口找到所有依赖的模块的统称,根据入口模块(默认为src/index.js)创建一个chunk
    • 每个chunk至少都有两个属性
      • name:默认为main
      • id:唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
  2. 构建所有依赖模块

    每个chunk都有一个模块记录,一个模块编译完了之后,会对依赖的模块继续进行编译(模块有缓存如果加载过了就不会加载了 )

  3. 产生chunk assets

    在第二步完成之后,chunk中会产生一个模块列表,列表中包含了模块id模块转换后的代码

    接下来,webpack会根据配置为chunk生成一个资源列表,即chunk assets,资源列表可以理解为是生成到最终文件的文件名和文件内容

chunk hash是根据所有chunk assets的内容生成的一个hash字符串

hash:一种算法,具体有很多分类,特点是将一个任意长度的字符串转换为一个固定长度的字符串,而且可以保证原始内容不变,产生的hash字符串就不变

简图


4. 合并chunk assets

将多个chunk的assets合并到一起,并产生一个总的hash


3.

输出

此步骤非常简单,webpack将利用node中的fs模块(文件处理模块),根据编译产生的总的assets,生成相应的文件。

总过程

相关推荐
precious。。。38 分钟前
1.2.1 三角不等式演示
前端·javascript·html
小陈工1 小时前
Python Web开发入门(十一):RESTful API设计原则与最佳实践——让你的API既优雅又好用
开发语言·前端·人工智能·后端·python·安全·restful
星空1 小时前
前段--A_2--HTML属性标签
前端·html
三万棵雪松1 小时前
【Linux 物联网网关主控系统-Web部分(一)】
linux·前端·嵌入式linux
摸鱼仙人~2 小时前
增量快照 vs 结构化共享:适用场景全解析
前端·vue.js
2301_771717212 小时前
Jackson的使用方法详解
java·服务器·前端
A923A2 小时前
【小兔鲜电商前台 | 项目笔记】第八天
前端·vue.js·笔记·项目·小兔鲜
DYuW5gBmH2 小时前
Chrome DevTools MCP 让 AI 无缝接管浏览器调试会话
前端·chrome·chrome devtools
qq12_8115175153 小时前
Java Web 影城会员管理系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】
java·前端·mybatis
weixin199701080164 小时前
《中控网商品详情页前端性能优化实战》
前端·性能优化