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

webpack构建流程

news 来源：原创 2025/5/9 14:58:06

文章目录

@[TOC](文章目录)

运行流程
初始化流程
编译构建流程
compile编译
make 编译模块
build module 完成模块编译

输出流程
seal输出资源
emit输出完成

小结

运行流程

是一个串行的过程，它的工作流程就是将各个插件串联起来

在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好

从启动到结束会依次执行以下三大步骤：

初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统

初始化流程

从配置文件和 Shell 语句中读取与合并参数，得出最终的参数

配置文件默认下为webpack.config.js，也或者通过命令的形式指定配置文件，主要作用是用于激活webpack的加载项和插件
关于文件配置内容分析，如下注释：

var path = require('path');
var node_modules = path.resolve(_dirname,'node_modules');
var pathToReact = path.resolve(node_modules,'')
module.exports = {entry:'',resolve:{alias:{'':pathTo } },//生成文件，是模块构建的终点，包括输出文件与输出路径output:{path:path.resolve(_dirname,'build'),filename:'[name].js' },//这里配置处理各模块的loader,包括css预处理loader,es6编译器module:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['',''] }} ],noParse:[pathTo]},//webpack各插件对象，在webpack的事件流中执行对应的方法plugins:[]
}

webpack 将 webpack.config.js 中的各个配置项拷贝到 options 对象中，并加载用户配置的 plugins

完成上述步骤之后，则开始初始化Compiler编译对象，该对象掌控者webpack声明周期，不执行具体的任务，只是进行一些调度工作

class Compiler extends Tapable{constructor(context){super();this.hooks = {beforeCompile:new AsyncSeriesHook(["params"]),compile: new SyncHook(["params"]),afterCompile: new AsyncSeriesHook(["compilation"]),make: new AsyncParallelHook(["compilation"]),entryOption: new SyncBailHook(["context", "entry"])// 定义了很多不同类型的钩子} }
}
function webpack(options){var compiler = new Compiler();...// 检查options,若watch字段为true,则开启watch线程return compiler;
}

Compiler 对象继承自 Tapable，初始化时定义了很多钩子函数

编译构建流程

根据配置中的 entry 找出所有的入口文件

module.exports = {entry:'./src/file.js'
}

初始化完成后会调用Compiler的run来真正启动webpack编译构建流程，主要流程如下：

compile 开始编译
make从入口点分析模块及其依赖的模块，创建这些模块对象
build-module构建模块
seal 封装构建结果
emit 把各个chunk输出到结果文件

compile编译

执行了run方法后，首先会触发compile，主要是构建一个Compilation对象

该对象是编译阶段的主要执行者，主要会依次下述流程：执行模块创建、依赖收集、分块、打包等主要任务的对象

make 编译模块

当完成了上述的compilation对象后，就开始从Entry入口文件开始读取，主要执行_addModuleChain()函数

build module 完成模块编译

这里主要调用配置的loaders，将我们的模块转成标准的JS模块

在用Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack后面对代码的分析

从配置的入口模块开始，分析其 AST，当遇到require等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系

输出流程

seal输出资源

seal方法主要是要生成chunks，对chunks进行一系列的优化操作，并生成要输出的代码

webpack 中的 chunk ，可以理解为配置在 entry 中的模块，或者是动态引入的模块

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表

emit输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名

output:{path:path.resolve(_dirname,'build'),filename:'[name].js'
}

在 Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会

从而webpack整个打包过程则结束了

小结

在这里插入图片描述

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

webpack构建流程

文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译输出流程seal输出资源emit输出完成小结运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只…...

编程日记 2025/5/9 14:58:06

服务器之连接简介（Detailed Explanation of Server Connection）

一台服务器最大能支持多少连接？一台客户端机器最多能发起多少条连接？？ 我们知道TCP连接，从根本上看其实就是client和server端在内存中维护的一组【socket内核对象】（这里也对应着TCP四元组：源IP、源端口、…...

编程日记 2025/4/27 11:26:43

第1章大型互联网公司的基础架构——1.5 服务发现

讲到这里，我们已经对一个客户端请求进入业务HTTP服务的过程有了较为详细的了解。业务HTTP服务在处理请求的过程中免不了与其他下游服务通信——可能会调用其他业务服务，可能需要访问数据库，可能会向消息中间件投递消息等，所以业务…...

编程日记 2025/5/6 8:36:46

uniapp PDF 预览和下载

创建 index.vue <template><view><view class"box"><view class"item" ><view class"title"><span></span><text>文件</text></view><view class"list" v-for"(…...

编程日记 2025/5/9 7:49:33

ubuntu服务器部署

关闭欢迎消息服务器安装好 ubuntu 系统后，进行终端登录，会显示出很多的欢迎消息通过在用户的根目录下执行 touch .hushlogin 命令，再次登录终端就不会出现欢迎消息修改hostname显示修改 /etc/hostname 文件内容为主机名，保…...

编程日记 2025/5/9 14:40:13

Deepseek 本地部署

准备环境设备：家用笔记本电脑，8核/16G/1Tb SSD/无独显系统：windows10 软件环境（非源码部署不需要）：conda 4.8.5、python3.7、git2.13 步骤下载安装Ollama 下载地址：OllamaGet up and r…...

编程日记 2025/5/9 9:21:51

[Linux][问题处理]修改密码报You must wait longer to change your password

一、问题描述在Linux控制台中修改密码，键入旧密码，设置并确认新密码后，却提示You must wait longer to change your password（您必须等待更长时间才能更改密码） 二、原因当前修改时间 < Minimum number of da…...

编程日记 2025/5/9 14:52:27

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-22- 操作鼠标拖拽 - 下篇（详细教程）

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种…...

编程日记 2025/5/9 14:09:16

SpringBoot3使用Swagger3

版本 springboot3.4.2 JAVA 17 一、引入Swagger3依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><version>2.0.4</version> </dependency> 二、快速启…...

编程日记 2025/5/9 14:57:06

HCIA综合项目之多技术的综合应用实验

十五 HCIA综合实验 15.1 IP规划 #内网分配网段192.168.1.0 24#内网包括骨干链路和两个用户网段，素以需要划分三个，借两位就够用了192.168.1.0 26--骨干192.168.1.64 26---R1下网络192.168.1.128 26---R2下网络192.168.1.192 26--备用192.168.1.64 26--…...

编程日记 2025/5/9 14:25:29

燕千云ITSM已支持DeepSeek对接！AI能力持续升级

春节期间，DeepSeek火爆全网，引发热议，作为国产AI大模型的黑马，DeepSeek凭借独特的训练方法、先进的模型架构和强大的联网推理能力，正不断拓展AI技术的应用边界。其“快思考”能力，可在极短时间内完成复杂决…...

编程日记 2025/5/9 14:06:05

Windows 自动主题：Windows AutoTheme

Windows 自动主题：Windows AutoTheme 链接：https://pan.xunlei.com/s/VOJ2ZG5t8QjL7_fGVIBgyxJQA1?pwdgbie# 自动切换：根据日出、日落时间自动切换 Windows 主题模式。高效轻量：使用 Rust 提供高效的系统调用，保证运…...

编程日记 2025/5/6 4:14:59

自定义Spring Cloud Gateway过滤器：记录慢请求

在构建微服务架构时，API网关是一个关键组件，它负责路由、负载均衡、安全验证等多种功能。Spring Cloud Gateway提供了强大的扩展能力，允许开发者通过自定义过滤器来增强其功能。本文将详细介绍如何实现一个自定义过滤器，用于记录响…...

编程日记 2025/5/6 8:58:43

python 浅拷贝和深拷贝

浅拷贝（Shallow Copy）语法示例代码 1示例代码 2 深拷贝（Deep Copy）语法示例代码浅拷贝与深拷贝的区别示例：浅拷贝与深拷贝的对比浅拷贝：只复制外层容器，内层嵌套对象仍然是共享的，…...

编程日记 2025/5/9 14:42:49

uni-app 学习（一）

一、环境搭建和运行 （一）创建项目直接进行创建 （二）项目结构理解 pages 是页面静态资源打包文件，看我们想输出成什么格式 app.vue 页面的入口文件 main.js 是项目的入口文件存放对打包文件的配置 pages 存放整…...

编程日记 2025/5/6 13:47:38

unity学习37：新版的动画器：动画状态机 Animator

目录 1 给游戏物体添加，新版的动画器 Animator 2 关于 Animator 3 创建动画器的控制器 Animator Controller 4 打开动画编辑器 Animator 5 动画编辑器还是Animation 5.1 创建新的动画 5.2 创建第2个动画 5.3 测试2个动画均可用 6 再次打开动画编辑器 A…...

编程日记 2025/5/9 13:47:31

参考链接 https://blog.csdn.net/qq_26611129/article/details/98732561 https://www.cnblogs.com/Azion/p/17756274.html https://avmedia.0voice.com/?id49050 https://blog.csdn.net/qq_44825209/article/details/133760652 https://www.cnblogs.com/Azion/p/17525955.htm…...

编程日记 2025/5/9 14:14:28

Vue3实现优雅的前端版本更新提示

背景在前端项目开发中,当我们发布了新版本后,需要及时通知用户刷新页面以获取最新代码。本文将介绍一种优雅的实现方案。实现原理在项目根目录维护一个version.json文件,记录当前版本号前端定期请求version.json检查版本对比本地存储的版本号,如有更新则提示用户核心代…...

编程日记 2025/5/6 11:58:30

vim常用快捷键

正常模式在打开文件进入 Vim 后，默认处于正常模式，该模式下的快捷键主要用于光标移动、文本操作等。光标移动基本移动：h（左移）、j（下移）、k（上移）、l（右移…...

编程日记 2025/5/7 5:08:26

P1226 【模板】快速幂

P1226 【模板】快速幂题目描述给你三个整数 a , b , p a,b,p a,b,p，求 a b m o d p a^b \bmod p abmodp。输入格式输入只有一行三个整数，分别代表 a , b , p a,b,p a,b,p。输出格式输出一行一个字符串 a^b mod ps，其中 a , b…...

编程日记 2025/5/9 13:40:34

【gRPC-gateway】是否有拦截器的情况添加健康检查的细节，与多路复用runtime.NewServeMux和gRPC区别讲解，与跨域功能，go案例

健康检查详解什么是健康检查？ 健康检查（Health Checking）是一种机制，用于监控服务的状态，确保服务在运行时是健康的、可用的。通过健康检查，系统可以自动检测服务是否正常工作，并在出现问题时…...

编程日记 2025/5/5 11:13:59

vue开发时，用localStorage常用方法及存储数组方法。

localStorage 可以让你在浏览器中存储键值对，并且在页面关闭后数据依然保留。localStorage 中存储的数据会一直保存在客户端，直到被手动删除或者清除浏览器缓存。 localStorage 中存储的数据在同一浏览器的不同窗口之间是共享的，而 sessionSt…...

编程日记 2025/5/9 13:25:32

HashMap详解+简单手写实现（哈希表）

1. 什么是 HashMap？ HashMap是Java集合框架中的一种数据结构，它实现了Map接口，用于存储键值对（Key-Value Pair）。HashMap允许null键和null值，并且不保证元素的顺序。 --- 2. HashMap 的工作原理 2.1 内…...

编程日记 2025/5/9 14:26:29

解决Did not find dashscope_api_key问题——jupyter设置环境变量

jupyter中使用通义千文langchain 报错 Value error, Did not find dashscope_api_key, please add an environment variable DASHSCOPE_API_KEY which contains it, or pass dashscope_api_key as a named parameter.我本来以为这样就是已经加上了： #导入相关包 i…...

编程日记 2025/5/9 14:46:22

尚硅谷爬虫note003

一、函数 1. 函数的定义 def 函数名（）： 代码 2.函数的调用函数名（） 3. 定义参数（不调用函数不执行） def sum（a，b） #形参 c a b print（c&…...

编程日记 2025/5/9 13:57:00

算法兵法全略（译文）

目录始计篇谋攻篇军形篇兵势篇虚实篇军争篇九变篇行军篇地形篇九地篇火攻篇用间篇始计篇算法，在当今时代，犹如国家关键的战略武器，也是处理各类事务的核心枢纽。算法的世界神秘且变化万千，不够贤能聪慧…...

编程日记 2025/5/9 14:25:29

NO.17十六届蓝桥杯备战|do-while循环|break和continue语句|三道练习(C++)

do-while循环 do-while语法形式在循环语句中 do while 语句的使⽤最少，它的语法如下： //形式1 do 语句; while( 表达式 );//形式2 do { 语句1; 语句2; ... } while( 表达式 );while 和 for 这两种循环都是先判断，条件如果…...

编程日记 2025/5/9 14:42:49

【广州大学主办，发表有保障 | IEEE出版，稳定EI检索，往届见刊后快至1个月检索】第二届电气技术与自动化工程国际学术会议 (ETAE 2025)

第二届电气技术与自动化工程国际学术会议 (ETAE 2025) The 2nd International Conference on Electrical Technology and Automation Engineering 大会官网：http://www.icetae.com/【更多详情】会议时间：2025年4月25-27日会议地点&#xff1a…...

编程日记 2025/5/9 14:31:06

Spring Cache 详细讲解

Spring Cache 是 Spring 框架提供的缓存抽象层，通过统一的 API 和注解简化缓存操作，支持多种缓存实现（如 Redis、EhCache、Caffeine 等）。其核心目标是减少重复计算，提升系统性能，同时保持代码简洁性。 1. …...

编程日记 2025/5/6 5:15:51

CPT205 计算机图形学 OpenGL 3D实践（CW2）

文章目录 1. 介绍2. 设计3. 准备阶段4. 角色构建5. 场景构建6. 交互部分6.1 键盘交互6.2 鼠标交互6.3 鼠标点击出多级菜单进行交互 7. 缺点与问题7.1 程序bug7.2 游戏乐趣不足7.3 画面不够好看 8. 完整代码 1. 介绍前面已经分享过了关于CPT205的CW1的2D作业，这次C…...

编程日记 2025/5/9 13:40:33

Netty的基本架构详解

EventLoopGroup基本认识我们需要了解的 EventLoopGroup, Netty对EventLoopGroup做了很多的扩展实现，下图是他的家族图谱： 我们上一节课使用的案例，使用的是NioEventLoopGroup，他是NIO的实现，可以看出来他是Multithre…...

编程日记 2025/5/9 13:46:35

2025前端面试题超全面解析（附答案与深度扩展）

文章目录一、HTML篇（扩展版）1. **HTML5语义化标签的实际应用场景**2. **Web Components实战：如何封装一个自定义按钮组件？**3. **Web Worker的用途与限制** 二、CSS篇（扩展版）1. **CSS盒模型详解&#xff…...

编程日记 2025/5/9 14:40:13

自己搭建可以和deepseek对话的WEB应用

第一步下载安装anaconda，地址：https://repo.anaconda.com/ 第二步打开anaconda客户端，打开conda命令行窗口第三步创建一个open-webui专属的python专属的虚拟环境，并且指定python具体的版本 conda create --name open…...

编程日记 2025/5/8 6:02:36

Linux系统运行模式和链接

一、系统运行模式 centos6 0 关机模式 1 单用户模式 2 字符模式，无网络连接 3 字符模式 4 预留 5 图形模式 6 重启模式查看系统当前处于的运行模式切换为图形模式 init 5 centos7 字符模式 multi-user…...

编程日记 2025/4/28 21:47:59

.NET 9.0 的 Blazor Web App 项目，进度条＜progress＞组件使用注意事项

一、执行过程中，要刷新进度条的显示，需要延时、释放，否则进度条不实时更新，最后一下到 100% // 延时，释放给前端：【必须】，否则进度条不实时更新，最后一下到 100await Task.D…...

编程日记 2025/5/9 14:55:18

头歌实验--面向对象程序设计

目录实验五类的继承与派生第1关：简易商品系统任务描述答案代码第2关：公司支出计算任务描述答案代码第3关：棱柱体问题任务描述答案代码实验五类的继承与派生第1关：简易商品系统任务描述答案代码 #incl…...

编程日记 2025/5/2 8:05:31

IoTDB 断电后无法启动 DataNode，日志提示 Meet error while starting up

问题 IoTDB 1.3.2 版本，断电后 IoTDB 的 DataNode 无法启动，日志如下： 2024-12-16 14:45:41,350 [main] ERROR o.a.i.db.service.DataNode:562 - Meet error while starting up. org.apache.iotdb.commons.exception.StartupException: Fo…...

编程日记 2025/5/9 14:43:39

2024华为OD机试真题-最大报酬(C++)-E卷B卷-100分

2024华为OD机试最新题库-(C卷+D卷+E卷)-(JAVA、Python、C++) 目录题目描述输入描述输出描述示例一解题思路考点代码 c++ 题目描述小明每周上班都会拿到自己的工作清单，工作清单内包含n项工作，每项工作都有对应的耗时时间（单位h）和报酬, 工作的总报酬为…...

编程日记 2025/5/9 14:56:08

jenkins war Windows安装

Windows安装Jenkins 需求1.下载jenkins.war2.编写快速运行脚本3.启动Jenkins4.Jenkins使用需求 1.支持在Windows下便捷运行Jenkins； 2.支持自定义启动参数； 3.有快速运行的脚步样板。 1.下载jenkins.war Jenkins下载地址：https://get.j…...

编程日记 2025/5/6 15:02:25

HCIA项目实践--RIP相关原理知识面试问题总结回答

9.4 RIP 9.4.1 补充概念什么是邻居？ 邻居指的是在网络拓扑结构中与某一节点（如路由器）直接相连的其他节点。它们之间可以直接进行通信和数据交互，能互相交换路由信息等，以实现网络中的数据转发和路径选择等功能。&am…...

编程日记 2025/5/9 14:16:19

用大模型学大模型04-模型与网络

目前已经学完深度学习的数学基础，开始学习各种模型和网络阶段，给出一个从简单到入门的，层层递进的学习路线。并给出学习每种模型需要的前置知识。增加注意力机制，bert, 大模型，gpt, transformer， MOE等流行…...

编程日记 2025/5/6 11:10:49

浏览器扩展实现网址自动替换

作为一个开发爱好者，不能顺畅访问github是很痛苦的，这种状况不知道何时能彻底解决。目前也有很多方案可以对应这种囧况，我此前知道有一个网站kkgithub，基本上把github的静态内容都搬了过来，我们如果需要访问某个githu…...

编程日记 2025/5/7 10:36:02

适配器模式详解（Java）

一、引言 1.1 定义与类型适配器模式是一种结构型设计模式，主要目的是将一个类的接口转换为客户期望的另一个接口。这种模式使得原本因为接口不匹配而不能一起工作的类可以一起工作，从而提高了类的复用性。适配器模式分为类适配器和对象适配器两种类型。类适配器使用继承关…...

编程日记 2025/5/8 2:25:44

C语言表驱动法

最近了解到一种C语言的写法，故记录下来，内容来自deepseek。表驱动法表驱动法（Table-Driven Approach）是一种编程技术，通过使用表格（数组、结构体数组、哈希表等）来存储数据或逻辑&#xff0…...

编程日记 2025/4/29 20:11:54

【鸿蒙Next】优秀鸿蒙博客集锦

鸿蒙基础开发：多文件压缩上传及断点续传_鸿蒙断点续传-CSDN博客...

编程日记 2025/4/19 4:26:55

Django REST Framework：如何获取序列化后的ID

Django REST Framework：如何获取序列化后的ID 😄 嗨，小伙伴们！今天我们来聊一聊Django REST Framework（简称DRF）中一个非常常见的操作：如何获取序列化后的ID。对于那些刚入门的朋友们&#xff…...

编程日记 2025/5/9 9:17:05

deep seek

1.介绍:DeepSeek是一款由国内人工智能公司研发的大型语言模型，拥有强大的自然语言处理能力，能够理解并回答问题，还能辅助写代码、整理资料和解决复杂的数学问题。免费开源，媲美ChatGPT 最近最火爆的AI对话程序。 www.deepseek.com…...

编程日记 2025/5/4 18:19:24

前端设计模式介绍及案例（单例模式、代理模式、工厂模式、装饰者模式、观察者模式）

概要本文主要介绍了前端设计模式的定义、分类以及常用设计模式的具体案例。前言使用设计模式的目的：为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦…...

编程日记 2025/5/2 1:08:33

开源堡垒机 JumpServer 社区版实战教程：基于 Ubuntu 22.04 离线安装 JumpServer 社区版 v4.4.1

文章目录开源堡垒机 JumpServer 社区版实战教程：基于 Ubuntu 22.04 离线安装 JumpServer 社区版 v4.4.1一、环境要求1.1 操作系统1.1.1 Ubuntu1.1.2 CentOS 1.2 数据库1.2.1 JumpServer 需要使用的数据库1.2.2 创建数据库 SQL 参考1.2.2.1 PostgreSQL1.2.2.2 MySQL…...

编程日记 2025/5/6 12:56:54

电源测试和测量系统的创新遥感方法可以消除哪些潜在问题

传统的遥感方法远程感测是一种行之有效的方法，通过消除连接电缆中压降的影响来调节负载点的直流功率。这在测试和测量应用中尤其重要，在这些应用中，电源电压在一系列负载条件下的准确性和一致性通常对于获得准确且可重复的测试结果至关重要…...

编程日记 2025/5/6 15:02:49

文章目录 @[TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译 输出流程seal输出资源emit输出完成 小结

文章目录