常见面试题:Webpack的构建流程简单说一下。
文章目录
- 前言
- 一、Webpack 的核心使命:模块化打包
- 二、Webpack 构建流程详解
- 三、构建流程的可视化演示
- 项目结构
- 构建流程图
- 四、构建流程中的关键技术点
- 1. 依赖图的构建与优化
- 2. 哈希与缓存策略
- 3. 开发环境优化
- 五、简易版概括构建流程
- 总结
前言
在前端工程化中,Webpack 作为模块打包工具的“扛把子”,几乎成为了现代前端项目的标配。但你是否真正了解它的构建流程?为什么它能将零散的代码、样式和资源转化为高效的静态文件?本文将带你深入 Webpack 的构建流程,揭开它背后的技术奥秘。
一、Webpack 的核心使命:模块化打包
Webpack 的核心目标是将分散的模块(代码、样式、图片等)打包成优化后的静态资源,并解决以下问题:
- 依赖管理:处理模块间的复杂依赖关系(如
import
、require
)。 - 资源转换:支持非 JavaScript 文件(如 CSS、图片)的预处理。
- 性能优化:代码分割、哈希缓存、Tree Shaking 等。
二、Webpack 构建流程详解
Webpack 的构建流程可以分为以下六个关键阶段,每个阶段都像流水线上的工序,环环相扣。
- 初始化阶段:配置与上下文
- 配置加载:Webpack 读取
webpack.config.js
,解析entry
、output
、module
等配置。 - 上下文创建:初始化编译器(Compiler)和编译上下文(Compilation),为后续流程做准备。
- 入口分析:构建依赖图的起点
- 入口文件解析:从
entry
指定的文件(如main.js
)开始,递归解析所有依赖的模块。 - 依赖图构建:将模块及其依赖关系抽象为一张有向无环图(DAG),后续的代码分割和优化都基于此图。
- 模块解析与加载
-
模块解析:根据模块规范(CommonJS、ES Modules)和配置(
resolve
)找到模块的实际路径。 -
加载器处理:对非 JavaScript 文件(如 CSS、图片)应用对应的加载器(Loader),将其转换为 Webpack 能理解的模块。
-
示例:
module: {rules: [{test: /.css$/,use: ['style-loader', 'css-loader'], // CSS → 模块},{test: /.png$/,type: 'asset/resource', // 图片 → 资源},],},
-
- 代码转换与优化
-
代码转换:通过 Babel 等工具将 ES6+ 代码转换为浏览器兼容的代码。
-
Tree Shaking:移除未使用的代码(需配合 ES Modules 和
mode: 'production'
)。 -
代码分割:
- 动态导入:通过
import()
实现按需加载。 - SplitChunksPlugin:自动拆分公共依赖(如第三方库)。
- 动态导入:通过
- 插件执行:扩展构建流程
-
插件钩子:Webpack 在构建的不同阶段提供钩子(Hooks),插件通过这些钩子插入自定义逻辑。
-
常见插件:
HtmlWebpackPlugin
:自动生成 HTML 并注入打包后的 JS。MiniCssExtractPlugin
:将 CSS 提取为单独文件。DefinePlugin
:定义全局变量(如环境变量)。
- 输出阶段:生成最终文件
- 文件生成:根据
output
配置生成打包后的文件(如main.[contenthash].js
)。 - 哈希与缓存:通过文件名哈希(如
[contenthash]
)实现长期缓存,提升性能。
三、构建流程的可视化演示
为了更直观地理解,我们用一个简单的 Vue 项目为例:
项目结构
src/├── main.js # 入口文件├── App.vue # 根组件└── components/└── Button.vue # 子组件
构建流程图
graph TDA[初始化配置] --> B[入口分析: main.js]B --> C[模块解析: App.vue]C --> D[加载器处理: vue-loader → JS 模块]D --> E[代码分割: 分离第三方库]E --> F[插件执行: HtmlWebpackPlugin 生成 HTML]F --> G[输出: dist/main.[hash].js]
四、构建流程中的关键技术点
1. 依赖图的构建与优化
-
作用:Webpack 通过依赖图(Dependency Graph)管理模块间的关系,支持动态导入、Tree Shaking 等优化。
-
示例:
// 动态导入实现代码分割button.addEventListener('click', () => {import('./module.js').then(module => {module.doSomething();});});
2. 哈希与缓存策略
-
哈希类型:
[hash]
:整个构建的哈希值(不推荐,任何文件变化都会导致所有文件哈希变化)。[chunkhash]
:按 chunk 计算的哈希值(适用于第三方库)。[contenthash]
:按文件内容计算的哈希值(推荐,实现长期缓存)。
3. 开发环境优化
-
HMR(Hot Module Replacement) :
-
修改代码后,仅更新变化的模块,无需刷新页面。
-
配置示例:
devServer: {hot: true, // 启用 HMR},
-
五、简易版概括构建流程
-
初始化参数:从配置文件和 shell 语句中读取并且合并参数,得到最终的参数
-
开始编译:初始化 Compiler 加载所有配置插件,执行对象 run 方法,开始编译
-
确定入口:entry 找到所有入口
-
编译模块:调用所有 loader 对模块进行翻译,找出模块依赖的模块,在递归本步骤知道所有入口依赖的文件都经过处理
-
完成模块编译:得到每个模块被翻译后的最终内容以及他们之间的依赖关系
-
输出资源:包含多个模块的 chunk,每个 chunk 转换成单独的文件加入到输出列表中,可以修改输出内容
-
输出完成:根据配置确定输出的路径和文件名,把文件内容写出到文件系统
总结
Webpack 的构建流程是一个高度可扩展的模块化系统,通过依赖图、加载器、插件等机制,将分散的代码和资源转化为高效的静态文件。理解其构建流程不仅能帮助你优化项目性能,还能在遇到问题时快速定位原因。
相关文章:
常见面试题:Webpack的构建流程简单说一下。
文章目录 前言一、Webpack 的核心使命:模块化打包二、Webpack 构建流程详解三、构建流程的可视化演示项目结构构建流程图 四、构建流程中的关键技术点1. 依赖图的构建与优化2. 哈希与缓存策略3. 开发环境优化 五、简易版概括构建流程 总结 前言 在前端工程化中&…...
Elasticsearch基础篇-java程序通过RestClient操作es
目录 1.引入 2 初始化RestClient 1)引入es的RestHighLevelClient依赖: 2)因为SpringBoot默认的ES版本是7.17.10,所以我们需要覆盖默认的ES版本: 3)初始化RestHighLevelClient: 4)…...
SuperYOLO:多模态遥感图像中的超分辨率辅助目标检测之论文阅读
摘要 在遥感影像(RSI)中,准确且及时地检测包含数十像素的多尺度小目标仍具有挑战性。现有大多数方法主要通过设计复杂的深度神经网络来学习目标与背景的区分特征,常导致计算量过大。本文提出一种兼顾检测精度与计算代价的快速准确…...
k6学习k6学习k6学习k6学习k6学习k6学习
1.安装go 2.安装 xk6 (k6 扩展构建工具): go install go.k6.io/xk6/cmd/xk6latest3.构建自定义 k6 二进制文件(集成 faker 扩展): xk6 build --with github.com/gkarthiks/xk6-fakerlatest构建报错处理(代码拉取失败)࿱…...
ubuntu 安装mq
一、安装依赖 编译 Erlang 需要以下依赖库和工具: sudo apt update sudo apt install -y build-essential autoconf libncurses5-dev libssl-dev m4 unixodbc-dev libwxgtk3.0-gtk3-dev libgl1-mesa-dev libglu1-mesa-dev 二、解压源码包 tar -xzvf otp_src_21.…...
优化 Spring Boot 应用启动性能的实践指南
1. 引言 Spring Boot 以其“开箱即用”的特性深受开发者喜爱,但随着项目复杂度的增加,应用的启动时间也可能会变得较长。对于云原生、Serverless 等场景而言,快速启动是一个非常关键的指标。 2. 分析启动过程 2.1 启动阶段概述 Spring Boot 的启动流程主要包括以下几个阶…...
ubuntu18.04编译qt5.14.2源码
ubuntu18.04编译qt5.14.2源码 文章目录 ubuntu18.04编译qt5.14.2源码[toc]1 前言2 参考文档3 下载源码3.1 方法13.2 方法23.3 方法3 4 ubuntu编译qt源码4.1 环境准备4.2 设置交换分区大小4.3 编译源码4.4 添加环境变量4.5 验证编译结果4.6 编译帮助文档(qch…...
leetcodehot100刷题——排序算法总结
排序算法总结 冒泡排序介绍步骤(以升序排序为例)算法实现复杂度分析时间复杂度空间复杂度 是否为稳定排序:是稳定排序的定义 选择排序介绍步骤(以升序排序为例)算法实现复杂度分析时间复杂度空间复杂度 是否为稳定排序…...
多用途商务,电子产品发布,科技架构,智能手表交互等发布PPT模版20套一组分享
产品发布类PPT模版20套一组:产品发布PPT模版https://pan.quark.cn/s/25c8517b0be3 第一套PPT模版是一个总结用的PPT封面,背景浅灰色,有绿色叶片和花朵装饰,深绿色标题,多个适用场景和占位符。突出其清新自然的设计和商…...
2025年- H29-Lc137- 19.删除链表的倒数第N个节点(快慢指针)---java版
1.题目描述 2.思路 快慢指针都在虚拟头节点,然后让快指针先走n1步,接下来,快慢指针以前移动,直到快指针指向null,慢指针指向被删节点的前一个节点。 3.代码实现 方法一:不带测试用例 /*** Definition …...
新电脑软件配置二:安装python,git, pycharm
安装python 地址 https://www.python.org/downloads/ 不是很懂为什么这么多版本 安装windows64位的 这里我是凭自己感觉装的了 然后cmd输入命令没有生效,先重启下? 重启之后再次验证 环境是成功的 之前是输入的python -version 命令输入错误 安装pyc…...
医学影像开发的开源生态与技术实践:从DCMTK到DICOMweb的全面探索
🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,高级开发工程师,数学专业,10年以上C/C++, C#, Java等多种编程语言开发经验,拥有高级工程师证书;擅长C/C++、C#等开发语言,熟悉Java常用开发技术,能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...
【HarmonyOS 5开发入门】DevEco Studio安装配置完全指南
⭐本期内容:【HarmonyOS4+NEXT】Button组件核心特性 🏆系列专栏:鸿蒙HarmonyOS:探索未来智能生态新纪元 文章目录 前言下载开发工具安装开发工具配置开发环境新建项目项目结构概述运行项目Preview预览模拟器运行 报错处…...
出现 Uncaught ReferenceError: process is not defined 错误
在浏览器环境中,process 对象是 Node.js 环境特有的,因此当你在浏览器中运行代码时,会出现 Uncaught ReferenceError: process is not defined 错误。这个错误是因为代码里使用了 process.env.BASE_URL,而浏览器环境下并没有 proc…...
如何实现RTSP和RTMP低至100-200ms的延迟:直播SDK的技术突破
在实时音视频传输中,低延迟是直播应用的核心技术要求之一。无论是在线教育、远程医疗,还是实时互动直播,延迟过大会影响用户体验,甚至导致应用无法正常使用。大牛直播SDK(SmartMediaKit)在RTSP和RTMP播放器…...
linux-----------------库制作与原理(下)
1.ELF文件 要理解编译链链接的细节,我们不得不了解⼀下ELF⽂件。其实有以下四种⽂件其实都是ELF⽂件: • 可重定位⽂件(Relocatable File ) :即 xxx.o ⽂件。包含适合于与其他⽬标⽂件链接来创 建可执⾏⽂件或者共享…...
一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting
一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting 文章目录 一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting摘要Abstract1. 基本思想1.1 设计1.2 特点 2. Nerfstudio&Splatfacto2.1 Nerfstudio2.…...
Embedding 模型详解:架构、训练与 LLM 的区别
1. 什么是 Embedding 模型? Embedding 模型的核心使命是将离散的、高维的文本数据(例如单个词语、短语、句子、段落乃至整篇文档)转化为稠密的 (dense)、低维的 (low-dimensional)、连续的 (continuous) 向量表示。这些向量被称作“嵌入 (Em…...
网络的知识的一些概念
1.什么是局域网,什么是广域网 局域网(Local area network)也可以称为本地网,内网,局域网有这几个发展经历: 最开始电脑与电之间是直接用网线连接的 再后来有了集线器() 再后来出…...
NAT(网络地址转换)逻辑图解+实验详解
原理 NAT(Network Address Translation,网络地址转换) 是一种网络技术,用于在IP数据包通过路由器或防火墙时,修改其源IP地址或目标IP地址,以实现不同网络之间的通信。 基础概念 本来NAT是来解决 IPv4 地…...
深入解析Spring Boot与Kafka集成:构建高性能消息驱动应用
深入解析Spring Boot与Kafka集成:构建高性能消息驱动应用 引言 在现代分布式系统中,消息队列是实现异步通信和解耦的重要组件。Apache Kafka作为一种高性能、分布式的消息系统,被广泛应用于大数据和实时数据处理场景。本文将详细介绍如何在…...
Linux的内存泄漏问题及排查方法
内存泄漏是指在计算机程序中,已不再被使用的内存未被正确释放,导致内存占用随时间累积,进而引发系统内存不足、性能下降甚至崩溃的问题。在Linux系统中,开发者和运维人员可通过以下方法排查和解决内存泄漏问题: 1. 使…...
Java基础知识总结(超详细整理)
一:概述 1.1Java类及类的成员 属性、方法、构造器、代码块、内部类 (1)数组 java虚拟机内存划分 各区域作用 内存解析 基本使用 两个变量指向一个一维数组 没有new就不会在堆里新开辟空间 (2)对象数组 (3&a…...
Qt Widgets模块功能详细说明,基本控件:QPushButton(二)
一、基本控件(Widgets) Qt 提供了丰富的基本控件,如按钮、标签、文本框、复选框、单选按钮、列表框、组合框、菜单、工具栏等。 1、QPushButton 1.1、概述 (用途、继承关系) QPushButton 是 Qt 框架中用于创建按钮的控件,它的主…...
【MySQL成神之路】MySQL常见命令汇总
目录 MySQL常用命令总结 1. 数据库操作 2. 表操作 3. 数据操作(DML) 4. 索引与优化 5. 用户与权限管理 6. 备份与恢复 7. 事务控制 8. 常用函数 9. 系统状态与日志 总结 MySQL常用命令总结 MySQL作为最流行的关系型数据库之一,提供…...
UnLua源码分析(一)初始化流程
UnLua源码分析(一)初始化流程 接入插件启动注册设置默认参数集注册回调SetActivePostLoadMapWithWorldULuaEnvLocator启动Lua虚拟机初始化UE相关的Lua Lib创建与Lua交互的数据结构注册静态导出的类,函数,枚举Lua层初始化 UUnLuaMa…...
非线性1 修改
第一章为读者介绍了非线性动力学与混沌理论的基本概念、发展历史以及应用领域。 1.1 动力学简史: 从牛顿力学开始,介绍动力学作为物理学分支的发展历程。重点介绍了庞加莱对混沌现象的早期探索,以及20世纪60年代洛伦兹方程的发现࿰…...
系统性能不达标,如何提升用户体验?
当系统性能不达标时,要想有效提升用户体验,必须从性能优化、前后端协同、用户感知改善、监控预警机制四个关键维度切入。其中,性能优化是最直接有效的策略,它通过代码优化、资源压缩、缓存机制、CDN加速等手段,显著提升…...
【Linux】进程的基本概念
目录 概念描述进程-PCB如何查看进程通过系统目录进行查看通过ps指令进行查看 通过系统调用获取进程的PID和PPID(进程标⽰符)通过系统调用创建子进程通过一段代码来介绍fork为什么要有子进程?fork为什么给子进程返回0,给父进程返回子进程的PIDfork函数到底…...
mongodb管理工具的使用
环境: 远程服务器的操作系统:centOS stream 9; mongoDB version:8.0; 本地电脑 navicat premium 17.2 ; 宝塔上安装了mongoDB 目的:通过本地的navicat链接mongoDB,如何打通链接,分2步: 第一步:宝塔-&…...
面试中的线程题
原文链接:线程题大全 Java 并发库同步辅助类 CountDownLatch 工作机制:初始化一个计数器,此计数器的值表示需要等待的事件数量。 提供了两个主要方法: await():当一个线程调用此方法时,它将阻塞&#…...
计算机系统的层次结构
计算机系统的层次结构 一, 计算机系统的层次结构的定义 计算机的一个赢软件组成的综合体. 因为面对的应用范围越来越广, 所以必须有复杂的系统软件和硬件的支持. 软/硬件的设计者和使用者从不同的角度, 不同的语言来对待同一个计算机系统, 因此他们看到的计算机系统的属性对计…...
[特殊字符] SSL/TLS 中的密钥协商流程笔记
✅ 背景说明: SSL/TLS 为了确保通信保密性,结合使用了: 非对称加密(用于密钥交换) 对称加密(用于数据加密) 🔁 客户端主导密钥协商的完整流程如下: 1️⃣ 客户端发起…...
多模态大语言模型arxiv论文略读(八十一)
What is the Visual Cognition Gap between Humans and Multimodal LLMs? ➡️ 论文标题:What is the Visual Cognition Gap between Humans and Multimodal LLMs? ➡️ 论文作者:Xu Cao, Bolin Lai, Wenqian Ye, Yunsheng Ma, Joerg Heintz, Jintai …...
SpringBoot(一)--- Maven基础
目录 前言 一、初始Maven 1.依赖管理 2.项目构建 3.统一项目结构 二、IDEA集成Maven 1.Maven安装 2.创建Maven项目 2.1全局设置 2.2 创建SpringBoot项目 2.3 常见问题 三、单元测试 1.JUnit入门 2.断言 前言 Maven 是一款用于管理和构建Java项目的工具ÿ…...
如何使用WordPress创建美食博客
不管你是否意识到,食物是我们生活的核心。有些人将其用作燃料,而另一些人则将食谱作为一种艺术形式呈现。如果您属于后者,并且想创建一个美食博客来分享您的热情,那么WordPress是一个顶级平台。 几乎每个话题都有一个博客利基&am…...
SAP集团内部公司间交易自动开票
SAP集团内部公司间交易自动开票(非STO/EDI模式) 集团内部公司间采购与销售业务,在确认相应单据无误后,为减少人工开票业务, 可以用系统标准功能来实现自动开票。 1.采购发票自动开票(ERS) T-CODE:BP,勾选“基于收货的发票校验”、“自动G…...
代码审计-php框架开发,实战tp项目,打击微交易,源码获取,扩大战果
实战,不安全写法引发的注入 这个bc靶场源码没有,看老师演示 打开很明显的tp框架源码 拿到tp框架之后第一步,搜索版本信息5.0.5 两个思路 1.代码的不安全写法 2.版本自身存在的漏洞 全局搜索where看看也没有不安全的 哎?&…...
Atcoder Beginner Contest 406
比赛链接:ABC406 A - Not Acceptable 将小时转换成分钟直接进行判断。 时间复杂度: O ( 1 ) O(1) O(1)。 #include <bits/stdc.h> using namespace std;int main() {ios::sync_with_stdio(false); cin.tie(nullptr); cout.tie(nullptr);int a,…...
02 K8s双主安装
00 前提准备 # 设置好主机名并添加hosts解析主机名IP地址身份master01172.2.25.50主Mastermaster02172.2.25.51备Masternode01172.2.25.52节点1node02172.2.25.53节点2node03172.2.25.54节点3 01 使用脚本安装Docker # Docker脚本文件 https://node-siyuan.oss-cn-beijing.a…...
分别用 语言模型雏形N-Gram 和 文本表示BoW词袋 来实现文本情绪分类
语言模型的雏形 N-Gram 和简单文本表示 Bag-of-Words 语言表示模型简介 (1) Bag-of-Words (BoW) 是什么? *定义:将文本表示为词频向量,忽略词序和语法,仅记录每个词的出现次数。 **示例: 句子1:I love …...
2_Spring【IOC容器中获取组件Bean】
Spring中IOC容器中获取组件Bean 实体类 //接口 public interface TestDemo {public void doSomething(); } // 实现类 public class HappyComponent implements TestDemo {public void doSomething() {System.out.println("HappyComponent is doing something...")…...
一次页面假死分析
现象:系统的几个功能若干次切换,页面假死,无反应 上图,不是每次切换都假死,但非常容易重现,每次页面假死都在getValidatorJSONInfo这个调用后 getValidatorJSONInfo调用已返回,但返回内容页面挂…...
WPS多级标题编号以及样式控制
WPS多级标题编号以及样式控制 上一篇:WPS自动生成图表目录以及样式控制 阅读提示:请先阅读完本篇内容再操作,避免出现其他错误。 初始样式: 1.1 步骤演示 说明:以3级目录为例 标题1样式:黑体,…...
方差是什么?
一、方差是什么? 方差(Variance)是概率论和统计学中衡量数据离散程度(即数据与平均值的偏离程度)的核心指标。 通俗理解:方差越大,数据越“分散”“波动大”;方差越小,数据越“集中”“稳定”。 二、方差的公式(以样本数据为例) 计算步骤: 第一步:求平均值 ( …...
Java核心API实战:从字符串到多线程全解析
Java常用API详解与代码实践 一、字符串处理类 1. String类 // 字符串基础操作 String str "Hello,Java!"; System.out.println(str.substring(7)); // 输出"Java!" System.out.println(str.indexOf("Java")); // 输出7// 正则表达式匹配 Str…...
低代码AI开发新趋势:Dify平台化开发实战
在人工智能快速发展的今天,AI应用的开发方式也在不断演变。从传统的手写代码到如今的低代码甚至零代码开发,技术的进步让更多的非专业开发者也能轻松上手。本文将带你走进Dify平台化开发的世界,探索如何通过这一强大的低代码AI开发平台&#…...
基于First Order Motion与TTS的AI虚拟主播系统全流程实现教程
前言:多模态虚拟主播的技术革命 在AI内容生成领域,虚拟主播技术正经历从2D到3D、从固定模板到个性化定制的跨越式发展。本文将深入解析如何通过Python技术栈构建支持形象定制与声音克隆的AI虚拟主播系统,涵盖从人脸建模到多模态融合的全流程…...
中科院自动化研究所通用空中任务无人机!基于大模型的通用任务执行与自主飞行
作者: Ji Zhao and Xiao Lin 单位:中科院自动化研究所 论文标题:General-Purpose Aerial Intelligent Agents Empowered by Large Language Models 论文链接:https://arxiv.org/pdf/2503.08302 主要贡献 硬件-软件协同设计框…...
DOM知识点
DOM(Document Object Model)即文档对象模型,是用于表示和操作HTML、XML文档的编程接口。以下是关于DOM的一些知识点总结: 基本概念 • DOM将文档解析为一个由节点(Node)组成的树形结构,每个节…...