当前位置: 首页 > news >正文

前端工程化之: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 开始的数字进行编号。

相关文章:

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

一、webpack编译过程 webpack 的作用是将源代码编译(构建、打包)成最终代码。 整个过程大致分为三个步骤: 初始化编译输出 1.初始化 初始化时我们运行的命令 webpack 为核心包, webpack-cli 提供了 webpack 命令,通过…...

javaweb学习问题集

1 创建一个Javaweb项目 因为项目要放在tomcat10里运行,在添加tomcat10的依赖时,右键模块没有add frameworks support ,解决方法:按两下shift键,直接搜索 add frameworks support index.jsp文件我们已经不用了 我们在ideal上开发…...

java—AWT

AWT 课程:1、GUI编程简介_哔哩哔哩_bilibili 一.介绍 包含了很多类和接口!GUI!元素:窗口、按钮、文本框java.awt 二.窗口 1.构造 2.方法 // 实例化frame类Frame frame new Frame("这个一个框");// 设置可见性frame.…...

SQL注入-sqli-labs-master第一关

实验环境: Nginx.1.15.11 MySQL:5.7.26 实验步骤: 1.第一步: 在id1后加入一个闭合符号,如果报错,再在后面加上 -- 将后面注释掉,如果不报错,则证明为字符型。 http://127.0.0.1/…...

简述云原生基础定义及关键技术

云原生是什么 云原生是面向“云”而设计的应用,因此技术部分依赖于传统云计算的 3 层概念,基础设施即服务(IaaS)、平台即服务(PaaS)和软件即服务(SaaS)。 例如,敏捷的不可变基础设施交付类似于 IaaS,用来提供计算网络存储等基础资源,这些资源是可编程且不可变的,直…...

游戏中排行榜的后台实现

游戏中经常会有排行榜需求需要实现,例如常见的战力排行榜、积分排行榜等等。 排行榜一般会用到 Redis 来实现,原因是: Redis 基于内存操作,速度快Redis 提供了高效的有序集合 zset 例如创建一个名为 rank 的排行榜 # 为用户use…...

《动手学深度学习(PyTorch版)》笔记3.1

Chapter3 Linear Neural Networks 3.1 Linear Regression 3.1.1 Basic Concepts 我们通常使用 n n n来表示数据集中的样本数。对索引为 i i i的样本,其输入表示为 x ( i ) [ x 1 ( i ) , x 2 ( i ) , . . . , x n ( i ) ] ⊤ \mathbf{x}^{(i)} [x_1^{(i)}, x_2…...

【贪吃蛇:C语言实现】

文章目录 前言1.了解Win32API相关知识1.1什么是Win32API1.2设置控制台的大小、名称1.3控制台上的光标1.4 GetStdHandle(获得控制台信息)1.5 SetConsoleCursorPosition(设置光标位置)1.6 GetConsoleCursorInfo(获得光标…...

01.领域驱动设计:微服务设计为什么要选择DDD学习总结

目录 1、前言 2、软件架构模式的演进 3、微服务设计和拆分的困境 4、为什么 DDD适合微服务 5、DDD与微服务的关系 6、总结 1、前言 我们知道,微服务设计过程中往往会面临边界如何划定的问题,不同的人会根据自己对微服务的理 解而拆分出不同的微服…...

写静态页面——魅族导航_前端页面练习

0、效果&#xff1a; 1、html代码&#xff1a;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

Go 命令行解析 flag 包之快速上手

本篇文章是 Go 标准库 flag 包的快速上手篇。 概述 开发一个命令行工具&#xff0c;视复杂程度&#xff0c;一般要选择一个合适的命令行解析库&#xff0c;简单的需求用 Go 标准库 flag 就够了&#xff0c;flag 的使用非常简单。 当然&#xff0c;除了标准库 flag 外&#x…...

React16源码: React中commitAllHostEffects内部的commitDeletion的源码实现

commitDeletion 1 &#xff09;概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects&#xff0c;这个函数不仅仅处理了新增节点&#xff0c;更新节点最后一个操作&#xff0c;就是删除节点&#xff0c;就需要调用 commitDeletion&#xff0…...

[机器学习]简单线性回归——梯度下降法

一.梯度下降法概念 2.代码实现 # 0. 引入依赖 import numpy as np import matplotlib.pyplot as plt# 1. 导入数据&#xff08;data.csv&#xff09; points np.genfromtxt(data.csv, delimiter,) points[0,0]# 提取points中的两列数据&#xff0c;分别作为x&#xff0c;y …...

2024年搭建幻兽帕鲁服务器价格多少?如何自建Palworld?

自建幻兽帕鲁服务器租用价格表&#xff0c;2024阿里云推出专属幻兽帕鲁Palworld游戏优惠服务器&#xff0c;配置分为4核16G和4核32G服务器&#xff0c;4核16G配置32.25元/1个月、3M带宽96.75元/1个月、8核32G配置10M带宽90.60元/1个月&#xff0c;8核32G配置3个月271.80元。ECS…...

『OpenCV-Python|鼠标作画笔』

Opencv-Python教程链接&#xff1a;https://opencv-python-tutorials.readthedocs.io/ 本文主要介绍OpenCV-Python如何将鼠标作画笔绘制圆或者矩形。 示例一&#xff1a;图片上双击的位置绘制一个圆圈 首先创建一个鼠标事件回调函数&#xff0c;鼠标事件发生时就会被执行。鼠标…...

关于如何利用ChatGPT提高编程效率的

自从去年ChatGPT3.5推出以后&#xff0c;这一年时间在编程过程中我也在慢慢熟悉人工智能的使用&#xff0c;目前来看即使是免费的ChatGPT3.5对于编程效率的提升也是有很大帮助的&#xff0c;虽然在使用过程中确实出现了一些问题&#xff0c;本文记录下我的一些心得体会和用法。…...

Excel VBA ——从MySQL数据库中导出一个报表-笔记

本文主要涉及&#xff1a; VBA中数据库连接参数改成从配置文件获取 VBA连接MySQL数据库 VBA读MySQL数据库 演示两种写入工作簿的代码实现系统环境&#xff1a; Windows 10 64bit Excel 365 64bit WAMP&#xff08;3.2.2.2 64bit&#xff09;集成的MariaDB版本为10.4.10&#…...

金融OCR领域实习日志(一)——OCR技术从0到1全面调研

一、OCR基础 任务要求&#xff1a; 工作原理 OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;是指电子设备&#xff08;例如扫描仪或数码相&#xff09;检查纸上打印的字符&#xff0c;经过检测暗、亮的模式肯定其形状&#xff0c;而后用…...

ELK日志解决方案

ELK日志解决方案 ELK套件日志系统应该是Elasticsearch使用最广泛的场景之一了&#xff0c;Elasticsearch支持海量数据的存储和查询&#xff0c;特别适合日志搜索场景。广泛使用的ELK套件(Elasticsearch、Logstash、Kibana)是日志系统最经典的案例&#xff0c;使用Logstash和Be…...

嵌入式学习-驱动

嵌入式的一些基本概念 CPU与MCU的区别 CPU&#xff08;中央处理器&#xff0c;central processing unit) 指集成了运算器、控制器、寄存器、高速缓存等功能模块的芯片&#xff0c;负责执行计算机程序指令的处理器。MCU&#xff08;单片微型计算机或单片机&#xff0c;microco…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...