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

webpack打包要义

news 来源：原创 2025/8/13 4:02:34

webpack基本

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的工作原理可以概括为以下几个核心步骤：

1. 入口起点（Entry）

Webpack 从配置文件中指定的入口文件（Entry Point）开始，分析应用程序的依赖关系。
入口文件通常是项目的 main.js 或 index.js 文件。

2. 依赖解析（Dependency Resolution）

Webpack 递归地解析入口文件及其依赖的所有模块（如通过 import 或 require 引入的模块）。
它会构建一个依赖图（Dependency Graph），表示所有模块之间的依赖关系。

3. 加载器处理（Loader Processing）

Webpack 本身只能处理 JavaScript 和 JSON 文件，但通过加载器（Loaders），它可以处理其他类型的文件（如 CSS、图片、字体等）。
加载器将非 JavaScript 文件转换为有效的模块，以便 Webpack 能够处理它们。
对于css资源使用css-loader、style-loader处理为bundle，png则拷贝到静态文件中

4. 插件处理（Plugin Processing）

插件（Plugins）用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。
插件可以在 Webpack 构建过程的不同生命周期中执行自定义逻辑。

5. 代码分割（Code Splitting）

Webpack 支持将代码分割成多个 bundle 或 chunk，以便实现按需加载或并行加载。
这有助于优化应用程序的加载性能。

6. 输出（Output）

经过上述步骤处理后，Webpack 将所有模块打包成一个或多个 bundle 文件。
输出文件通常包括 JavaScript、CSS、图片等资源，并可以配置输出路径和文件名。

7. 优化（Optimization）

Webpack 提供了多种优化选项，如 Tree Shaking（移除未使用的代码）、代码压缩、作用域提升（Scope Hoisting）等。
这些优化可以减少最终生成的 bundle 文件的大小，提升应用程序的性能。

8. 热更新（Hot Module Replacement, HMR）

在开发环境中，Webpack 支持热更新功能，允许在不刷新整个页面的情况下更新模块。
这大大提高了开发效率。

9. 模式（Mode）

Webpack 支持不同的构建模式（如 development 和 production），每种模式会自动启用不同的优化策略。
例如，生产模式会启用代码压缩和 Tree Shaking。

10. 配置文件（Configuration）

Webpack 的行为通过配置文件（通常是 webpack.config.js）进行定制。
配置文件可以指定入口、输出、加载器、插件、优化选项等。

webpack主要工作流程

Webpack 打包流程详解

1. 初始化阶段

读取配置文件：执行打包命令（如 webpack）后，Webpack 会读取配置文件（通常是 webpack.config.js）。配置文件包含以下关键信息：
- 入口点（entry）：指定打包的起始文件。
- 输出路径（output）：定义打包后文件的存放位置。
- 模块规则（module.rules）：配置不同类型模块（如 JavaScript、CSS、图片等）的处理方式。
- 插件（plugins）：配置插件以扩展 Webpack 的功能。
构建打包环境：根据配置文件，Webpack 构建一个基本的打包环境，确定入口文件和输出的基本规则。

2. 模块解析（构建模块依赖图）阶段

解析入口文件：从配置的入口文件开始，Webpack 逐行解析文件内容。对于 JavaScript 文件，它会查找 import、require 等语句来确定依赖关系。例如：
```
import './util.js';
```

Webpack 会将 util.js 标记为 index.js 的依赖文件。

递归解析依赖文件：Webpack 递归地解析依赖文件中的依赖关系，构建一个模块依赖图。这个图展示了所有模块之间的依赖关系。
Loader 工作时机：当遇到非 JavaScript 模块（如 CSS、图片、字体等）时，对应的 loader 开始工作。例如：
- 对于 .css 文件，配置 css-loader 和 style-loader：
  - css-loader 将 CSS 文件解析为 JavaScript 可以处理的模块形式。
  - style-loader 将 CSS 内容插入到 HTML 的 <style> 标签中。

3. 模块打包阶段

打包模块：根据构建好的模块依赖图，Webpack 将模块打包成一个或多个文件。它会按照一定的顺序和规则，将各个模块的代码组合在一起。
代码优化：在打包过程中，Webpack 会对代码进行优化，如代码混淆（重命名变量和函数等），以避免变量名冲突和减小文件大小。
代码分割：如果配置了代码分割（Code Splitting），Webpack 会将代码分割成不同的块（chunks）。例如，将公共代码提取到单独的文件中，方便浏览器缓存，提高加载效率。

4. 输出阶段

输出文件：根据配置文件中的 output 设置，Webpack 将打包好的文件输出到指定目录。输出内容包括：
- JavaScript 文件
- CSS 文件（如果通过 loader 处理后有独立的 CSS 输出）
- 图片等资源文件
文件名定义：输出的文件名可以通过配置定义，例如：
```
output: {filename: '[name].[hash].js'
}
```
其中 [name] 是模块名称，[hash] 是文件内容的哈希值，用于版本控制。

5. Plugin 工作时机

打包过程中的插件：一些插件会在打包过程中发挥作用。例如：
- UglifyJsPlugin：在模块打包阶段或之后，对 JavaScript 代码进行压缩，删除不必要的空格、注释，缩短变量名等。
输出阶段的插件：一些插件主要在输出阶段工作。例如：
- HtmlWebpackPlugin：根据配置的模板文件，自动将打包后的资源引用（如 JavaScript 和 CSS 文件）插入到 HTML 文件的适当位置。
- CleanWebpackPlugin：在每次打包前清理输出目录，确保输出目录的整洁。

通过以上流程，Webpack 能够高效地将项目中的模块打包成适合生产环境使用的文件。

webpack优化

1. 代码分割（Code Splitting）

原理

将代码分割成多个小块（chunks），避免一次性加载大量代码，尤其适用于大型应用。通过将不同功能模块或第三方库与业务代码分离，浏览器可以按需加载特定代码块，从而提高首次加载速度。

实现方式

动态导入：使用 import() 语法实现代码分割。例如：
```
const Button = () => import('./Button');
```

当需要使用 Button 组件时，对应的代码块才会被加载。

配置优化：通过 optimization.splitChunks 配置，自动提取公共模块（如多个页面共用的第三方库）到单独的文件中，便于浏览器缓存。

2. 缓存优化

原理

通过给文件名添加哈希值（如 [name].[hash].js），确保文件内容变化时文件名才会改变。浏览器可以根据文件名判断是否需要重新加载文件，未变化的文件可以直接使用缓存，从而提高加载效率。

实现方式

文件名哈希：在 Webpack 配置文件的 output 部分设置 filename 属性为带哈希值的格式。例如：
```
output: {filename: 'js/[name].[hash].js'
}
```
长期缓存：将第三方库等不常变化的代码提取出来，使用较长哈希值（如 [name].[contenthash].js）命名，便于浏览器长期缓存。

3. 压缩优化

原理

通过减小文件大小来减少网络传输时间。对于 JavaScript 文件，可以删除空格、注释、缩短变量名等；对于 CSS 文件，可以压缩样式规则。

实现方式

JavaScript 压缩：使用 UglifyJsPlugin 插件。
CSS 压缩：使用 CssMinimizerPlugin 插件。

配置示例：

optimization: {minimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourceMap: false}),new CssMinimizerPlugin()]
}

4. Tree Shaking

原理

Tree Shaking 是一种去除 JavaScript 代码中未使用代码（dead-code）的技术。Webpack 在打包时会分析模块之间的依赖关系，找出未被引用的代码并删除，从而减小打包后的文件大小。

实现方式

开启 Tree Shaking：在 Webpack 配置文件的 optimization 部分，默认开启 usedExports 属性。
代码要求：确保代码使用 ES6 模块语法（import 和 export），因为 Tree Shaking 依赖于静态模块结构来分析代码使用情况。

webpack打包要义

webpack基本 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的工作原理可以概括为以下几个核心步骤： 1. 入口起点（Entry） Webpack 从配置文件中指定的入口文件（Entry Point）开始，分析应用…...

编程日记 2025/8/13 4:02:34

Mybatis——Mybatis开发经验总结

摘要本文主要介绍了MyBatis框架的设计与通用性，阐述了其作为Java持久化框架的亮点，包括精良的架构设计、丰富的扩展点以及易用性和可靠性。同时，对比了常见持久层框架，分析了MyBatis在关系型数据库交互中的优势。此外&#xff0…...

编程日记 2025/8/12 4:26:39

013：深度学习之神经网络

本文为合集收录，欢迎查看合集/专栏链接进行全部合集的系统学习。合集完整版请参考这里。深度学习是机器学习中重要的一个学科分支，它的特点就在于需要构建多层且“深度”的神经网络。人们在探索人工智能初期，就曾设想构建一个用数学方式…...

编程日记 2025/8/12 10:20:36

Java 模板变量替换——字符串替换器（思路Mybatis的GenericTokenParser）

Java 模板变量替换——字符串替换器（思路Mybatis的GenericTokenParser） 思路字符串替换器思路模板变量替换无非是寻找出字符串（模板）中的特殊标记，用对应的变量进行字符串替换。提到变量替换，大家第一能…...

编程日记 2025/8/13 16:20:00

蓝桥杯备考：数据结构之栈和 stack

目录栈的概念以及栈的实现 STL 的stack 栈和stack的算法题栈的模板题栈的算法题之有效的括号验证栈序列后缀表达式括号匹配栈的概念以及栈的实现栈是一种只允许在一端进行插入和删除的线性表空栈：没有任何元素入栈：插入元素消息出…...

编程日记 2025/8/12 1:58:41

Lambda离线实时分治架构深度解析与实战

一、引言在大数据技术日新月异的今天，Lambda架构作为一种经典的数据处理模型，在应对大规模数据应用方面展现出了强大的能力。它整合了离线批处理和实时流处理，为需要同时处理批量和实时数据的应用场景提供了成熟的解决方案。本文将对Lambda…...

编程日记 2025/8/13 14:43:34

Vue.js组件开发，AI时代的前端新玩法

AI可不只是写写小说、聊聊天，现在它的触角已经伸到了程序员的代码世界里。特别是前端开发，很多人都在尝试用ChatGPT或者类似的AI工具来写代码，甚至直接生成Vue.js组件。有些人感叹，"写代码的时代是不是要结束了？&…...

编程日记 2025/8/13 18:33:13

标定 3

标定场景与对应的方式标定板标定主要应用场景：（1）无法获取到执行机构物理坐标值，比如相机固定，执行机构为传送带等（2）相机存在畸变等非线性标定情况，需要进行畸变校正（3）标定单像素精度（4）获取两个相机之间的坐标系关系标定板操作步骤：（1）确定好拍…...

编程日记 2025/8/13 23:05:33

电商项目-基于ElasticSearch实现商品搜索功能(三)

本系列文章主要介绍基于 Spring Data Elasticsearch 实现商品搜索的后端代码，介绍代码逻辑和代码实现。主要实现功能：根据搜索关键字查询、条件筛选、规格过滤、价格区间搜索、搜索查询分页、搜索查询排序、高亮查询。主要应用技术:canal，…...

编程日记 2025/8/11 19:54:41

【51单片机】03 蜂鸣器-播放音乐

蜂鸣器-播放音乐一、原理介绍1.硬件电路二、练习1.让蜂鸣器发声2.尝试演奏小星星一、原理介绍蜂鸣器分为有源蜂鸣器、无源蜂鸣器两种。有源蜂鸣器：施加合适的电压之后就会发出特定频率的声音无源蜂鸣器：需要提供特定频率的声音信号，才能…...

编程日记 2025/8/14 3:20:22

MySQL 架构

MySQL架构 MySQL8.0服务器是由连接池、服务管理⼯具和公共组件、NoSQL接⼝、SQL接⼝、解析器、优化器、缓存、存储引擎、⽂件系统组成。MySQL还为各种编程语⾔提供了⼀套⽤于外部程序访问服务器的连接器。整体架构图如下所⽰： MySQL Connectors：为使⽤…...

编程日记 2025/8/13 0:02:27

XML 解析器：深入解析与高效应用

XML 解析器：深入解析与高效应用引言 XML（可扩展标记语言）作为一种重要的数据交换格式，被广泛应用于各种系统和平台中。为了有效地处理和解析XML数据，XML解析器发挥着至关重要的作用。本文将深入探讨XML解析器的原理…...

编程日记 2025/8/13 23:55:25

LabVIEW设计 IIR 滤波器

这是一个设计 IIR 滤波器的 LabVIEW 程序框图，其功能主要是用于设计滤波器并计算其频率响应，但它并不直接对输入的波形进行实时滤波，而是提供一个滤波器的频率响应分析工具。以下是框图中各部分的详细解释： 1. 主要模块功能说明 …...

编程日记 2025/8/11 9:57:03

目录 1. Introduction2. Preliminaries2.1. Particle Swarm Optimization Algorithm2.2. Deep Deterministic Policy Gradient2.3. Calculation of the Total Output Power of the Quadcopter Battery 3.OptimalEnergyConsumptionPathPlanningBasedonPSO-DDPG3.1.ProblemModell…...

编程日记 2025/8/14 3:19:51

AI刷题-数列推进计算任务、数组中的幸运数问题

目录一、数列推进计算任务问题描述测试样例解题思路： 问题理解数据结构选择算法步骤优化思路最终代码： 运行结果： 二、数组中的幸运数问题问题描述测试样例解题思路： 问题理解数据结构选择算法步…...

编程日记 2025/8/13 17:49:33

微服务的配置共享

1.什么是微服务的配置共享微服务架构中，配置共享是一个重要环节，它有助于提升服务间的协同效率和数据一致性。以下是对微服务配置共享的详细阐述： 1.1.配置共享的概念配置共享是指在微服务架构中，将某些通用或全局的配置信息…...

编程日记 2025/8/13 11:59:07

【计算机网络】窥探计网全貌：说说计算机网络体系结构？

标签难度考察频率综合题⭐⭐⭐60% 这个问题在计算机网络知识体系中是一个比较重要的问题，只有完整地了解计算机网络的体系结构才能清晰地认识网络的运行原理。在回答这个问题时，笔者认为有几个比较重要的点： 首先一定要分清楚前置条件&am…...

编程日记 2025/8/11 19:04:16

【MySQL】DATEDIFF()函数使用

DATEDIFF 函数用于计算两个日期之间的差值，以天为单位 DATEDIFF 函数返回一个整数，表示 date1 和 date2 之间的天数。如果 date1 在 date2 之前，结果为负数；如果在 date2 之后，结果为正数；如果相等&#xf…...

编程日记 2025/8/13 19:06:05

计算机网络学习笔记

第1课绪论、传输介质【知识点回顾】两种导线可以减小电磁干扰： 双绞线（分为非屏蔽双绞线、屏蔽双绞线）（RJ-45用）同轴电缆（短距离使用）网络通信的基本单位：位（bit&…...

编程日记 2025/8/13 1:23:38

Spring Boot性能提升的核武器，速度提升500%！

虚拟线程是 Java 21 引入的一个新特性，用于简化并发编程。它与传统的操作系统线程相比，具有显著的优势： 轻量级：虚拟线程由 JVM 管理，而非操作系统，因此它们的内存占用和创建成本远低于传统线程。理论上&am…...

编程日记 2025/8/13 7:52:35

zig 安装，Hello World 示例

1. 安装 Zig 首先，你需要在你的计算机上安装 Zig 编译器。你可以从 Zig 官方网站下载适合你操作系统的版本。安装完成后，你可以在终端中运行以下命令来检查 Zig 是否安装成功： zig version如果一切正常，它会显示 Zig 的版本信…...

编程日记 2025/8/13 23:55:44

【数据库系统概论】第5章数据库完整性【!触发器】

目录 5.1数据库完整性概述 5.2 实体完整性 5.3 参照完整性 5.4 用户定义的完整性属性上的约束 1. 列值非空（NOT NULL） 2. 列值唯一（UNIQUE） 3. 检查列值是否满足条件（CHECK） 元组上的约束 5.5 完…...

编程日记 2025/8/13 0:41:10

Linux中通过frp实现内网穿透

1、准备工作准备一台公网服务器（云服务器），推荐阿里云或者腾讯云都可以需要下载好frp安装包Linux端的和Windows端的安装包网址：Releases fatedier/frp (github.com)https://github.com/fatedier/frp/releases 2、下载frp_0…...

编程日记 2025/8/14 2:07:30

Vscode辅助编码AI神器continue插件

案例效果 1、安装或者更新vscode 有些版本的vscode不支持continue，最好更新到最新版，也可以直接官网下载 https://code.visualstudio.com/Download 2、安装continue插件搜索continue，还未安装的，右下脚有个Install，点击安装即可 <...

编程日记 2025/8/11 15:16:57

上海亚商投顾：沪指探底回升微涨机器人概念股午后爆发

上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。一.市场情绪市场全天探底回升，沪指盘中跌超1.6%，创业板指一度跌逾3%，午后集体拉升翻红…...

编程日记 2025/8/13 9:23:56

LeetCode 3297.统计重新排列后包含另一个字符串的子字符串数目 I：滑动窗口

【LetMeFly】3297.统计重新排列后包含另一个字符串的子字符串数目 I：滑动窗口力扣题目链接：https://leetcode.cn/problems/count-substrings-that-can-be-rearranged-to-contain-a-string-i/ 给你两个字符串 word1 和 word2 。如果一个字符串 x 重新…...

编程日记 2025/8/13 12:03:02

ssm旅游攻略网站设计+jsp

系统包含：源码论文所用技术：SpringBootVueSSMMybatisMysql 需要源码或者定制看文章最下面或看我的主页目录目录 III 1 绪论 1 1.1 研究背景 1 1.2 目的和意义 1 1.3 论文结构安排 2 2 相关技术 3 2.1 SSM框架介绍 3 2.2 B/S结构介绍 3 …...

编程日记 2025/8/12 23:26:03

前端学习-环境this对象以及回调函数（二十七）

目录前言目标环境对象作用环境对象this是什么？ 判断this指向的粗略规则是什么？ 回调函数目标常见的使用场景综合案例：Tab任务栏切换总结前言男儿何不带吴钩，收取关山五十州目标能够分析判断函数运行在不…...

编程日记 2025/8/13 13:57:07

计算机网络-数据链路层（虚拟局域网VLAN）

2.6 虚拟局域 2.6.1 虚拟局域网概述以太网交换机连接的各个网络同属于一个广播域，随着以太网的规模扩大，广播域也会相应的扩大，巨大的广播域会带来巨大的弊端。广播风暴难以治理潜在的安全问题 TCP/IP协议下会进行广播的协议&#xff1a…...

编程日记 2025/8/12 17:42:00

Python贪心

贪心贪心：把整体问题分解成多个步骤，在每个步骤都选取当前步骤的最优方案，直至所有步骤结束；每个步骤不会影响后续步骤核心性质：每次采用局部最优，最终结果就是全局最优如果题目满足上述核心性质&#xf…...

编程日记 2025/8/10 12:14:15

CSS 盒模型

盒模型 CSS盒模型是网页布局的核心概念之一，它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范，每个HTML元素都被视为一个矩形盒子，这个盒子由以下四个部分组成： 内容区（Content area&#xff…...

编程日记 2025/8/12 5:16:16

【linux】vi编辑文件及readonly文件修改读写权限方法

板端vi修改文件： 1、vi 文件路径 vi mnt/eol/config/oem_eol.xml2、按 i进入修改状态，此时可以修改配置文件 3、按 esc退出修改状态，并按"wq!保存问题：readonly文件无法直接vi修改方案： 1、mount -o remoun…...

编程日记 2025/8/13 16:38:50

Git使用笔记

Git 版本控制一、Git 介绍二、Git 使用1. 安装及配置2. 使用方法3. Git 命令3. 历史版本回退4. 分支 (Branch) 三、远程仓库1. SSH公钥连接Gitee2. 推送到远程仓库一、Git 介绍常见版本控制软件：集中式（CVS、SVN），分布式&#…...

编程日记 2025/8/13 23:17:20

mermaid大全（语法、流程图、时序图、甘特图、饼图、用户旅行图、类图）

⚠️ 有些网站的mermaid可能不完整，因此下面教程中可能有些语法是无效的。 😊亲测Typora软件均可以显示。 1. 介绍 Mermaid是一个基于JavaScript的图表绘制工具，它使用类似Markdown的语法来创建和修改各种类型的图表。以下是关于Mermaid的详…...

编程日记 2025/8/13 1:22:50

慧集通（DataLinkX）iPaaS集成平台-业务建模之业务对象（二）

3.UI模板当我们选择一条已经建好的业务对象点击功能按钮【UI模板】进入该业务对象的UI显示配置界面。右边填写的是UI模板的编码以及对应名称；菜单界面配置以业务对象UI模板编码获取显示界面。 3.1【列表-按钮】展示的对应业务对象界面的功能按钮配置&#xff1…...

编程日记 2025/8/13 3:49:07

vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况： 组件内容： <el-input v-model"applyBasicInfo.outerApplyId"/> 样式设置： ::v-deep .el-input__wrapper {background-color: pink; }// 也可以这样设置 ::v-deep(.el-input__wrapper) {background-color: pink…...

编程日记 2025/8/11 11:57:51

python迷宫寻宝第6关安全策略

地图： 1、体力不足去找终点，体力足则原地不动 import api## 判断是否需要离场的函数 # 体力足返回False，体力不足返回True def should_leave():# 拿到我离终点的距离e_row api.get.exit(what"row")e_col api.get.exit(what"…...

编程日记 2025/8/12 4:26:36

【计算机网络】lab7 TCP协议

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1. 实验目的…...

编程日记 2025/8/11 8:40:24

Monorepo设置：新手指南

Monorepo是一种项目代码管理方法，指在单个代码仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署的复杂性，并提供更好的可重用性和协作性。简单理解：所有项目都在一个代码仓库中 📦，但这并不意…...

编程日记 2025/8/14 1:39:22

HTTP 请求与响应的结构

一、引言在当今数字化的时代，网络通信如同空气一般无处不在，而HTTP协议则是网络世界中最为重要的基石之一。当我们在浏览器中输入一个网址，轻松浏览网页、观看视频、下载文件或是进行在线购物等操作时，背后HTTP协议都在默默地发…...

编程日记 2025/8/12 22:11:20

计科高可用服务器架构实训（防火墙、双机热备，VRRP、MSTP、DHCP、OSPF）

一、项目介绍需求分析： （1）总部和分部要求网络拓扑简单，方便维护，网络有扩展和冗余性； （2）总部分财务部，人事部，工程部，技术部，提供…...

编程日记 2025/8/13 17:56:28

Soildworks的学习【2025/1/12】

右键空白处，点击选项卡，即可看到所有已调用的选项卡： 点击机械小齿轮选项卡，选择文档属性，选择GB国标： 之后点击单位，选择MMGS毫米单位： 窗口右下角有MMGS，这里也可以选择…...

编程日记 2025/8/13 17:30:35

ORACLE-表空间和分区控制

--查询最后更新的统计信息时间 SELECT table_name, last_analyzed FROM dba_tables WHERE table_name 表名; --更新统计信息 -----按分区 BEGIN DBMS_STATS.GATHER_TABLE_STATS( ownname > XI_SF, -- 模式名称 tabname > 表名, -- 表名称 partnam…...

编程日记 2025/8/12 4:26:33