前端工程化之:webpack1-6(编译过程)

一、webpack编译过程

 webpack 的作用是将源代码编译(构建、打包)成最终代码。

 整个过程大致分为三个步骤:

  1. 初始化
  2. 编译
  3. 输出

1.初始化

初始化时我们运行的命令 webpack 为核心包, webpack-cli 提供了 webpack 命令,通过命令启动 webpack  webpack 命令就是在调用核心包里面的功能。

此阶段, webpack 会将 CLI 参数(--mode --config等)、配置文件(webpack.config.js)、默认配置进行融合,形成一个最终的配置对象。

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

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

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

2.编译 

(1)创建 chunk 

 chunk webpack 在内部构建过程中的一个概念,译为,它表示通过某个入口找到的所有依赖的统称。

根据入口模块 (默认为 ./src/index.js ) 创建一个 chunk

 main chunk  => 入口模块:  ./src/index.js 

 chunk 可以有多个,每个 chunk 都有至少两个属性:

  •  name :默认为 main 
  •  id :唯一编号,开发环境和 name 相同,生产环境是一个数字,从 0 开始

(2)构建所有依赖模块 

构建过程入下图: 

 

  1. 模块文件:首先拿到模块文件 ./src/index.js ,根据路径检查这个模块是否已经加载过。
  2. 已记录则结束,未记录则继续:根据右侧模块记录表格中的路径找到模块检查是否记录。
  3. 读取文件内容(node环境可以读取文件):未加载将文件内容读取出来,通过语法分析转换为   AST 抽象语法树。
  4. AST抽象语法树:AST explorer,通过 AST 语法树准确地找到依赖关系,记录依赖,进行树形结构遍历,找到所有依赖.
  5. 保存到 dependencies 中:将所有依赖保存到 dependencies 数组中,记录完整相对路径即模块 id
  6. 替换依赖函数:将有依赖的地方转换为另一种代码格式,例: require("./a") ,转换为__webpack_require("./src/a.js") ,将 require 转换 __webpack__require ,将路径转换为绝对路径即模块 id
  7. 保存转换后的模块代码:将上图中的模块记录表格保存。模块 id 完整绝对路径,转换后的代码为示例中 index.js - 2 代码。

例: index.js - 1 

console.log("index");
require("./a");
require("./b");

 index.js - 2 

console.log("index");
__webpack_require("./src/a.js");
__webpack_require("./src/b.js");

 a.js 

require("./b");
console.log("a");
module.exports = "a";

 b.js 

console.log("b");
module.exports = "b";

转换后的 chunk 中模块记录:

模块id转换后代码
index.js console.log("index");
__webpack_require("./src/a.js");
__webpack_require("./src/b.js");
 a.js __webpack_require("./src/b.js");
console.log("a");
module.exports = "a";
 b.js console.log("b");
module.exports = "b";

示例编译过程: 

  1.  ./src/index.js 未加载。
  2. 内容(字符串): index.js - 1 代码。
  3. --> AST --> 树形结构遍历,找到所有依赖。
  4.  dependencies:["./src/a.js","./src/b.js"]
  5.  index.js - 1 中代码被转换为 index.js - 2
  6. 保存转换后的代码。
  7. 循环依赖,重新加载 ./src/a.js
  8. 重复 1-6 过程。
  9. 根据 a.js 文件中的依赖关系,重新加载 ./src/b.js
  10. 重复 1-6 过程,此时 a.js 文件的依赖关系已分析完毕, chunk 模块记录表格已经记录了所有模块信息。
  11.  index.js 模块按顺序应该加载 b.js 模块,但是由于 b.js 已经加载过了,为已记录状态。所以不需要重新加载 b.js 模块。
  12. 依赖模块构建结束。

(3)产生 chunk assets

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

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

 chunk 中的模块记录:

模块id转换后的代码
./src/index.jsxxxxxxxxxx
./src/a.jsxxxxxxxxxx

 chunk assets

文件名文件内容
./dist/main.jsxxxxxxxxxxxx
./dist/main.js.mapxxxxxxxxxxxx

chunk hash:xxxxxxxxxxxxxxxxxxxxxxx

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

 (4)合并 chunk assets

 将多个 chunk assets 合并到一起,形成一个总的资源列表,并产生一个总的 hash

 

 3.输出

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

 

二、总过程 

如果开启 watch ,每一次文件变化都会重新进行编译。 

涉及术语 

  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 开始的数字进行编号。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/649636.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学经典教材有哪些

说实话,国内大学教材编写的初衷,就是让学生自己看不懂。。 不信你去看看同济大学出版社的高数书籍。 给大家推荐两本国外的数学书,质量吊打国内大部分教材(特别是同济的高数教材)。如果我大学能看到这些教材&#xf…

android camera系列(Camera1、Camera2、CameraX)的使用以及输出的图像格式

一、Camera 1.1、结合SurfaceView实现预览 1.1.1、布局 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-au…

PuLP库-多数线性规划问题

投标价格重预算 背景 甲方需要采购一批物资&#xff0c;采购数量为甲方给定的预计采购数量&#xff0c;并限制了采购总价。例甲方采购预算清单如下&#xff0c;采购总预算为不超过 3175 元 采购内容采购数量投标单价投标报价合计电脑10空调20洗衣机8桌子7打印机35合计 注&a…

正则匹配 | 正则实际应用探索分享

这并不是一篇教正则基础的文章&#xff0c;其正则式不能对您进行使用后的结果负责&#xff0c;请以研究的眼光看待本篇文章。 技术就是懒人为了更好的懒才会想办法搞的东西&#xff0c;我最近因为某些原因需要频繁删除注释 我就想到通过替换的正则功能快速删除文件中的简单注…

IP报文格式

IP报文格式 报文格式 图1 IP头格式 表1 IP头字段解释 字段长度含义Version4比特 4&#xff1a;表示为IPV4&#xff1b;6&#xff1a;表示为IPV6。IHL4比特首部长度&#xff0c;如果不带Option字段&#xff0c;则为20&#xff0c;最长为60&#xff0c;该值限制了记录路由选项。…

Java / Spring Boot + POI 给 Word 添加水印

1、前言(瞎扯) 有个需求&#xff1a;整一个给 Word 加水印的demo&#xff0c;于是我就网上找呗~ 看到那个 Aspose 好像是收费的&#xff0c;然后就把目光转向了 POI&#xff0c;看到各种形形色色的也不知道哪个能用。整了一会&#xff0c;自己拷贝出一个比较精简的能用的 demo …

SpringBoot activemq收发消息、配置及原理

SpringBoot集成消息处理框架 Spring framework提供了对JMS和AMQP消息框架的无缝集成&#xff0c;为Spring项目使用消息处理框架提供了极大的便利。 与Spring framework相比&#xff0c;Spring Boot更近了一步&#xff0c;通过auto-configuration机制实现了对jms及amqp主流框架…

JavaScript中onclick事件传递数组参数时接收的是[object,object],需要转为字符串传递

问题描述 在JavaScript中定义button的onclick点击事件&#xff0c;传递参数的时候&#xff0c;某个参数是数组&#xff0c;在方法体里面接收到的值是[object,object]。 一开始在网上找解决办法&#xff0c;使用JSON.stringify(arr)传递数组参数&#xff0c;还是不行&#xff…

Ubuntu20.04配置grub ,不必每次都输入 nomodeset

一、查看原来的grub配置&#xff1a; grep menuentry /boot/grub/grub.cfg 重点注意以下类似的核心版本号 gnulinux-5.15.0-92-generic-advanced-86a86651-8070-4338-92ee-8a1a13a98a05 gnulinux-5.15.0-67-generic-advanced-86a86651-8070-4338-92ee-8a1a13a98a05 …

首发:2024全球DAO组织发展研究

作者&#xff0c;张群&#xff08;专注DAO及区块链应用研究&#xff0c;赛联区块链教育首席讲师&#xff0c;工信部赛迪特邀资深专家&#xff0c;CSDN认证业界专家&#xff0c;微软认证专家&#xff0c;多家企业区块链产品顾问&#xff09; DAO&#xff08;去中心化自治组织&am…

03-Redis缓存高可用集群

文章目录 1、Redis集群方案比较2、Redis高可用集群搭建redis集群搭建Java操作redis集群 4、Redis集群原理分析槽位定位算法跳转重定位Redis集群节点间的通信机制gossip通信的10000端口网络抖动 Redis集群选举原理分析集群脑裂数据丢失问题集群是否完整才能对外提供服务Redis集群…

LC 2846. 边权重均等查询

2846. 边权重均等查询 难度&#xff1a; 困难 题目大意&#xff1a; 现有一棵由 n 个节点组成的无向树&#xff0c;节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi, wi] 表示树中存在一条位于节点 …

Android studio环境搭建过程异常

异常1 e: file:///D:/project/AndroidProject/settings.gradle.kts:5:21: Unexpected tokens (use ; to separate expressions on the same line) dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories { // …

6JS对象

对象简介 对象是JavaScript的基本数据类型。对象是一种复合值&#xff1a;它将很多值&#xff08;原始值或者其他对象&#xff09;聚合在一起&#xff0c;可通过名字访问这些值。对象也可看做是属性的无序集合&#xff0c;每个属性都是一个名/值对。属性名是字符串&#xff0c…

Java 基础 - Java抽象类的使用示例

引言 在面向对象编程中,抽象类是一种重要的概念,它提供了一种用于建模共性和规范子类的方式。本文将通过一个简单的Java示例来介绍抽象类的基本使用,以及抽象类与具体类的关系。 抽象类的定义 在示例中,我们定义了一个抽象类 Shape,它包含了一个抽象方法 calculateArea…

第16章_网络编程(网络通信要素,TCP与UDP协议,网络编程API,TCP网络编程,UDP网络编程,URL编程)

文章目录 第16章_网络编程本章专题与脉络1. 网络编程概述1.1 软件架构1.2 网络基础 2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通信要素一&#xff1a;IP地址和域名2.2.1 IP地址2.2.2 域名 2.3 通信要素二&#xff1a;端口号2.4 通信要素三&#xff1a;网络通信协议…

BLIP-2: 基于冻结图像编码器和大型语言模型的语言-图像预训练引导

BLIP-2: 基于冻结图像编码器和大型语言模型的语言-图像预训练引导 项目地址BLIP-2的背景与意义BLIP-2的安装与演示BLIP-2模型库图像到文本生成示例特征提取示例图像-文本匹配示例性能评估与训练引用BLIP-2Hugging Face集成 在语言-图像预训练领域&#xff0c;BLIP-2的出现标志着…

提高多旋翼无人机的悬停控制精度

要提高多旋翼无人机的悬停控制精度&#xff0c;可以从以下几个方面进行优化&#xff1a; 优化传感器配置&#xff1a;选用高精度的传感器&#xff0c;如激光雷达、红外传感器等&#xff0c;可以提供更准确的姿态和位置信息。同时&#xff0c;对传感器进行定期标定和校准&#…

利用SPI,结合数据库连接池durid进行数据服务架构灵活设计

接着上一篇文章业务开始围绕原始凭证展开,而展开的基础无疑是围绕着科目展开的。首先我们业务层面以财政部的小企业会计准则的一级科目引入软件中。下面我们来考虑如何将科目切入软件更加灵活,方便业务扩展、维护与升级。 SPI是首先想到的数据服务方式 为什么会想到它呢?首…

深度学习分类问题之Logistic Regression

逻辑回归模型&#xff0c;虽然名字是回归&#xff0c;但是是解决分类问题。 在线性回归里面&#xff0c;我们根据有效信息&#xff0c;预测下一个由已知信息得到的数值&#xff0c;叫做回归问题&#xff0c;但是在机器学习里面&#xff0c;常见的是分类问题。最常见的就是MNIS…