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

webpack 的工作流程

news 来源：原创 2025/8/23 6:20:09

Webpack 的工作流程可以分为以下几个核心步骤，我将结合代码示例详细说明每个阶段的工作原理：

1. 初始化配置

Webpack 首先会读取配置文件（默认 webpack.config.js），合并命令行参数和默认配置。

// webpack.config.js
module.exports = {entry: './src/index.js',      // 入口文件output: {                     // 输出配置filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {                     // 模块处理规则rules: [{ test: /\.js$/, use: 'babel-loader' },{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]},plugins: [                    // 插件配置new HtmlWebpackPlugin()]
};

2. 解析入口文件

从入口文件开始构建依赖图（Dependency Graph）。

// src/index.js
import { hello } from './utils.js';
import './styles.css';hello();

Webpack 会解析入口文件的 import/require 语句，生成抽象语法树（AST）：

// Webpack 内部伪代码
const entryModule = parseModule('./src/index.js');
const dependencies = entryModule.getDependencies(); // 获取依赖 ['./utils.js', './styles.css']

3. 递归构建依赖图

对每个依赖模块进行递归解析，形成完整的依赖关系树。

// Webpack 内部伪代码
function buildDependencyGraph(entry) {const graph = {};const queue = [entry];while (queue.length > 0) {const module = queue.pop();const dependencies = parseModule(module).getDependencies();graph[module] = {dependencies,code: transpile(module) // 使用 Loader 转换代码};queue.push(...dependencies);}return graph;
}

4. 使用 Loader 处理模块

根据配置的 Loader 对不同类型的文件进行转换。

// 当遇到 CSS 文件时
// 使用 css-loader 处理
module.exports = function(content) {// 将 CSS 转换为 JS 模块return `const css = ${JSON.stringify(content)};const style = document.createElement('style');style.textContent = css;document.head.appendChild(style);export default css;`;
};

5. 应用插件（Plugins）

在编译的不同阶段触发插件钩子。

// 自定义插件示例
class MyPlugin {apply(compiler) {compiler.hooks.emit.tap('MyPlugin', (compilation) => {console.log('资源生成完成，准备输出！');});}
}// 在配置中引用
plugins: [new MyPlugin()]

6. 代码优化与分块（Code Splitting）

根据配置进行代码分割。

// 动态导入示例
import(/* webpackChunkName: "utils" */ './utils').then(({ hello }) => {hello();
});// 输出结果：
// main.bundle.js
// utils.bundle.js (异步加载的 chunk)

7. 生成最终文件

将所有模块打包到一个或多个 bundle 中。

// Webpack 生成的 bundle 伪代码
(function(modules) {// Webpack 启动函数const installedModules = {};function __webpack_require__(moduleId) {// 模块缓存检查if (installedModules[moduleId]) {return installedModules[moduleId].exports;}// 创建新模块const module = installedModules[moduleId] = {exports: {}};// 执行模块函数modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);return module.exports;}// 加载入口模块return __webpack_require__("./src/index.js");
})({"./src/index.js": function(module, exports, __webpack_require__) {// 转换后的入口文件代码const utils = __webpack_require__("./src/utils.js");__webpack_require__("./src/styles.css");utils.hello();},"./src/utils.js": function(module, exports) {// 转换后的工具文件代码exports.hello = () => console.log("Hello Webpack!");}
});

8. 输出文件

将最终生成的 bundle 写入文件系统。

// Webpack 内部输出逻辑伪代码
const outputPath = path.resolve(config.output.path);
fs.writeFileSync(path.join(outputPath, config.output.filename),bundleCode
);

完整流程总结

初始化配置：合并配置参数
编译准备：创建 Compiler 对象
开始编译：从入口文件出发
模块解析：递归构建依赖图
Loader 处理：转换非 JS 模块
插件干预：在关键生命周期执行插件
代码生成：生成运行时代码和模块闭包
输出文件：将结果写入目标目录

关键概念代码实现

模块解析器伪代码

class Module {constructor(filepath) {this.filepath = filepath;this.ast = null;this.dependencies = [];}parse() {const content = fs.readFileSync(this.filepath, 'utf-8');this.ast = parser.parse(content, { sourceType: 'module' });}collectDependencies() {traverse(this.ast, {ImportDeclaration: (path) => {this.dependencies.push(path.node.source.value);}});}
}

通过以上步骤，Webpack 完成了从源代码到最终打包文件的完整转换过程。实际项目开发中，可以通过调整配置文件的 entry、output、loader 和 plugins 来定制打包行为。

webpack 的工作流程

Webpack 的工作流程可以分为以下几个核心步骤，我将结合代码示例详细说明每个阶段的工作原理： 1. 初始化配置 Webpack 首先会读取配置文件（默认 webpack.config.js），合并命令行参数和默认配置。 // webpack.config.js…...

编程日记 2025/8/23 6:20:09

Linux 常用指令详解

Linux 操作系统中有大量强大的命令行工具，下面我将分类介绍一些最常用的指令及其用法。 ## 文件与目录操作 ### 1. ls - 列出目录内容 ls [选项] [目录名] 常用选项： - -l：长格式显示（详细信息） - -a：显…...

编程日记 2025/8/23 6:19:50

DXFViewer进行中 : -＞封装OpenGL -＞解析DXF直线

DXFViewer进行中,目标造一个dxf看图工具。. 目标1：封装OpenGL,实现正交相机及平移缩放功能 Application.h #pragma once #include <string> #include <glad/glad.h> #include <GLFW/glfw3.h> #include "../Core/TimeStamp.h" #includ…...

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

多序列比对软件MAFFT介绍

MAFFT（Multiple Alignment using Fast Fourier Transform）是一款广泛使用且高效的多序列比对软件，由日本京都大学的Katoh Kazutaka等人开发，最早发布于2002年，并持续迭代优化至今。它支持从几十条到上万条核酸或蛋白质序列的快速比对，同时在准确率和计算效率之间提供灵…...

编程日记 2025/8/20 20:34:10

基于 HTML5 Canvas 实现图片旋转与下载功能

一、引言在 Web 开发中，经常会遇到需要对图片进行处理并提供下载功能的需求。本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能。通过对代码的解读，我们…...

编程日记 2025/8/20 20:34:08

学习路线(机器人系统)

机器人软件/系统学习路线（从初级到专家） 初级阶段（6-12个月）基础数学编程基础机器人基础概念推荐资源中级阶段（1-2年）机器人运动学机器人动力学控制系统感知系统推荐资源高级阶段（2-3年&#…...

编程日记 2025/8/19 23:08:04

基于EFISH-SCB-RK3576工控机/SAIL-RK3576核心板的网络安全防火墙技术方案‌（国产化替代J1900的全栈技术解析）

‌基于EFISH-SCB-RK3576/SAIL-RK3576的网络安全防火墙技术方案‌ （国产化替代J1900的全栈技术解析） ‌一、硬件架构设计‌ ‌流量处理核心模块‌ ‌多核异构架构‌： ‌四核Cortex-A72（2.3GHz）‌：处理深度…...

编程日记 2025/8/20 14:42:38

基于 jQuery 实现复选框全选与选中项查询功能

在 Web 开发中，复选框是常见的交互元素，尤其是在涉及批量操作、数据筛选等场景时，全选功能和选中项查询功能显得尤为重要。本文将介绍如何使用 HTML、CSS 和 jQuery 实现一个具备全选、反选以及选中项查询功能的复选框组，帮助开发…...

编程日记 2025/8/20 20:34:03

Python中的JSON库，详细介绍与代码示例

目录 1. 前言 2. json 库基本概念 3. json 的适应场景 4. json 库的基本用法 4.1 导 json入模块 4.2 将 Python 对象转换为 JSON 字符串 4.3 将 JSON 字符串转换为 Python 对象 4.4 将 Python 对象写入 JSON 文件 4.5 从 JSON 文件读取数据 4.6 json 的其他方法 5.…...

编程日记 2025/8/20 20:34:02

tensorflow 调试

tensorflow 调试 tf.config.experimental_run_functions_eagerly(True) 是 TensorFlow 中的一个配置函数，它的作用是： 让 tf.function 装饰的函数以 Eager 模式（即时执行）运行，而不是被编译成图（Graph&…...

编程日记 2025/8/20 20:34:00

iptables的基本选项及概念

目录 1.按保护范围划分： 2.iptables 的基础概念 4个规则表： 5个规则链： 3.iptables的基础选项 4.实验 1.按保护范围划分： 主机防火墙：服务范围为当前一台主机 input output 网络防火墙：服务范围为防…...

编程日记 2025/8/20 2:03:42

使用AI 将文本转成视频工具介绍

🎬 文字生成视频工具一款为自媒体创作者设计的全自动视频生成工具，输入文本即可输出高质量视频，大幅提升内容创作效率。视频演示：https://leeseean.github.io/Text2Video/?t23 ✨ 功能亮点功能模块说明📝 智能分…...

编程日记 2025/8/20 20:33:56

Python生活手册-NumPy数组创建：从快递分拣到智能家居的数据容器

一、快递分拣系统（列表/元组转换） 1. 快递单号录入（np.array()） import numpy as np快递单号入库系统快递单列表 ["SF123", "JD456", "EMS789"] 快递数组 np.array(快递单列表) print(f"…...

编程日记 2025/8/20 20:33:54

Cmake编译wxWidgets3.2.8

一、下载库源代码去wxWidgets - Browse /v3.2.8 at SourceForge.net下载wxWidgets-3.2.8.7z 二、建立目录结构 1、在d:\codeblocks目录里新建wxWidgets_Src目录 2、把文件解压到该目录 3、建立 CB目录，并在该目录下分别建立 Debug 和 Release目录三、使用Cmake…...

编程日记 2025/8/20 20:33:53

2.在Openharmony写hello world

原文链接：https://kashima19960.github.io/2025/03/21/openharmony/2.在Openharmony写hello%20world/ 前言 Openharmony 的第一个官方例程的是教你在Hi3861上编写hello world程序，这个例程相当简单编写 Hello World”程序，而且步骤也很省略&…...

编程日记 2025/8/20 12:27:56

「OC」源码学习——对象的底层探索

「OC」源码学习——对象的底层探索前言上次我们说到了源码里面的调用顺序，现在我们继续了解我们上一篇文章没有讲完的关于对象的内容函数，完整了解对象的产生对于isa赋值以及内存申请的内容函数内容先把_objc_rootAllocWithZone函数的内容先贴上…...

编程日记 2025/8/20 4:35:05

从0开始学习大模型--Day01--大模型是什么

初识大模型在平时遇到问题时，我们总是习惯性地去运用各种搜索引擎如百度、知乎、CSDN等平台去搜索答案，但由于搜索到的内容质量参差不齐，检索到的内容只是单纯地根据关键字给出内容，往往看了几个网页都找不到答案；而…...

编程日记 2025/8/20 20:33:48

202533 | SpringBoot集成RocketMQ

SpringBoot集成RocketMQ极简入门一、基础配置（3步完成） 添加依赖  <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version&g…...

编程日记 2025/8/20 20:33:46

大模型学习专栏-导航页

概要本专栏是小编系统性调研大模型过程中沉淀的知识结晶，涵盖技术原理、实践应用、前沿动态等多维度内容。为助力读者高效学习，特整理此导航页，以清晰脉络串联核心知识点，搭建起系统的大模型学习框架，助您循序渐进掌握…...

编程日记 2025/8/20 20:33:44

互联网大厂Java面试：从Java SE到微服务的全栈挑战

场景概述在这场面试中，谢飞机，一个搞笑但有些水的程序员，面对的是一位严肃的大厂面试官李严。面试官的目的是考察谢飞机在Java全栈开发，特别是微服务架构中的技术能力。面试场景设定在内容社区与UGC领域，模拟一个社交…...

编程日记 2025/8/20 2:17:49

2024年408真题及答案

2024年计算机408真题 2024年计算机408答案 2024 408真题下载链接 2024 408答案下载链接...

编程日记 2025/8/20 20:33:41

【datawhaleAI春训营】楼道图像分类

目录图像分类任务的一般处理流程为什么使用深度学习迁移学习加载实操环境的库加载数据集，默认data文件夹存储数据将图像类别进行编码自定义数据读取加载预训练模型模型训练，验证和预测划分验证集并训练模型修改baseline处理输入数据选择合适的模型Ale…...

编程日记 2025/8/20 20:33:39

Unity：输入系统（Input System）与持续检测键盘按键（Input.GetKey）

目录 Unity 的两套输入系统： 🔍 Input.GetKey 详解 🎯 对比：常用的输入检测方法技术底层原理（简化版） 示例：角色移动为什么会被“新输入系统”替代？ Unity 的两套输入系统&…...

编程日记 2025/8/19 22:38:03

day04_计算机常识丶基本数据类型转换

计算机常识计算机如何存储数据计算机底层只能识别二进制。计算机底层只识别二进制是因为计算机内部的电子元件只能识别两种状态，即开和关，或者高电平和低电平。二进制正好可以用两种状态来表示数字和字符，因此成为了计算机最基本的表示方…...

编程日记 2025/8/22 11:48:05

rvalue引用（）

一、先确定基础：左值（Lvalue）和右值（Rvalue）理解Rvalue引用，首先得搞清楚左值和右值的概念。左值（Lvalue）：有明确内存地址的表达式，可以取地址。比如变量名、引用等。复制代码 int a = 10; // a是左值 int& ref = a; // ref也是左值右值（Rval…...

编程日记 2025/8/20 20:33:34

【Web3】上市公司利用RWA模式融资和促进业务发展案例

香港典型案例朗新科技（充电桩RWA融资） 案例概述：2024年8月，朗新科技与蚂蚁数科合作，通过香港金管局“Ensemble沙盒”完成首单新能源充电桩资产代币化融资，募资1亿元人民币。技术实现：蚂蚁链提供…...

编程日记 2025/8/20 20:33:33

什么是IIC通信

IIC（Inter-Integrated Circuit），即IC，是一种串行通信总线，由飞利浦公司在1980年代开发，主要用于连接主板、嵌入式系统或手机中的低速外围设备1。IIC协议采用多主从架构，允许多个主设备和从设备连接在同一总线上进行通信。 IIC协议的工作原理： IIC协议使用两根信号线进…...

编程日记 2025/8/20 20:33:31

网络原理 TCP/IP

1.应用层 1.1自定义协议客户端和服务器之间往往进行交互的是“结构化”数据，网络传输的数据是“字符串”“二进制bit流”，约定协议的过程就是把结构化”数据转成“字符串”或“二进制bit流”的过程. 序列化：把结构化”数据转成“字符串”…...

编程日记 2025/8/20 12:26:20

掌纹图像识别：解锁人类掌纹/生物识别的未来——技术解析与前沿数据集探索

概述掌纹识别是一种利用手掌表面独特的线条、纹理和褶皱模式进行身份认证的生物识别技术。它具有非侵入性、高准确性和难以伪造的特点，被广泛应用于安全认证领域。以下将结合提供的链接，详细介绍掌纹识别的技术背景、数据集和研究进展。提供的链接分析香港理工大学掌纹数…...

编程日记 2025/8/20 20:33:28

【FPGA开发】Xilinx DSP48E2 slice 一个周期能做几次int8乘法或者加法？如何计算FPGA芯片的GOPS性能？

Xilinx DSP48E2 slice 在一个时钟周期内处理 INT8（8 位整数）运算的能力。核心能力概述一个 DSP48E2 slice 包含几个关键计算单元： 预加器 (Pre-Adder): 可以执行 A D 或 A - D 操作，其中 A 是 30 位，D 是 27 位。…...

编程日记 2025/8/20 18:30:34

APP 设计中的色彩心理学：如何用色彩提升用户体验

在数字化时代，APP 已成为人们日常生活中不可或缺的一部分。用户在打开一个 APP 的瞬间，首先映入眼帘的便是其色彩搭配，而这些色彩并非只是视觉上的装饰，它们蕴含着强大的心理暗示力量，能够潜移默化地影响用户的情绪、行…...

编程日记 2025/8/22 4:17:58

残差网络实战：基于MNIST数据集的手写数字识别

残差网络实战：基于MNIST数据集的手写数字识别在深度学习的广阔领域中，卷积神经网络（CNN）一直是处理图像任务的主力军。随着研究的深入，网络层数的增加虽然理论上能提升模型的表达能力，但却面临梯度消失、…...

编程日记 2025/8/20 20:33:23

科学养生，开启健康生活新篇章

在快节奏的现代生活中，健康养生成为人们关注的焦点。科学合理的养生方式，能帮助我们远离疾病，提升生活质量，无需依赖传统中医理念，也能找到适合自己的养生之道。饮食是养生的基础。遵循均衡饮食原则，每…...

编程日记 2025/8/20 12:42:15

如何扫描系统漏洞?漏洞扫描的原理是什么？

如何扫描系统漏洞?漏洞扫描的原理是什么？ 漏洞扫描是网络安全中识别系统潜在风险的关键步骤，其核心原理是通过主动探测和自动化分析发现系统的安全弱点。以下是详细解答： 一、漏洞扫描的核心原理主动探测技术通过模拟攻击者的行为&#xf…...

编程日记 2025/8/19 21:35:46

Scrapy分布式爬虫实战：高效抓取的进阶之旅

引言在2025年的数据狂潮中，单机爬虫如孤舟难敌巨浪，Scrapy分布式爬虫宛若战舰编队，扬帆远航，掠夺信息珍宝！继“动态网页”“登录网站”“经验总结”后，本篇献上Scrapy-Redis分布式爬虫实战，基于Quotes to Scrape，从单机到多机协同，代码简洁可运行，适合新手到老兵。…...

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

开元类双端互动组件部署实战全流程教程（第1部分：环境与搭建）

作者：一个曾在“组件卡死”里悟道的搬砖程序员在面对一个看似华丽的开元类互动组件时，很多人以为“套个皮、配个资源”就能跑通。实际上，光是搞定环境配置、组件解析、控制端响应、前后端互联这些流程，已经足够让新手懵3天、老鸟…...

编程日记 2025/8/22 15:22:32

【实验笔记】Kylin-Desktop-V10-SP1麒麟系统知识 —— 开机自启Ollama

提示：分享麒麟Kylin-Desktop-V10-SP1系统离线部署Deepseek后，实现开机自动启动 Ollama 工具的详细操作步骤说明：离线安装ollama后，每次开机都需要手动启动，并且需要保持命令终端不能关闭；通过文档操作方法能实现开机自动后台启动 Ollama 工具一、前期准备 1、离…...

编程日记 2025/8/20 22:30:43

Redis：现代服务端开发的缓存基石与电商实践-优雅草卓伊凡

Redis：现代服务端开发的缓存基石与电商实践-优雅草卓伊凡一、Redis的本质与核心价值 1.1 Redis的技术定位 Redis（Remote Dictionary Server）是一个开源的内存数据结构存储系统，由Salvatore Sanfilippo于2009年创建。它不同于传…...

编程日记 2025/8/20 20:33:16

认识并理解什么是链路层Frame-Relay(帧中继)协议以及它的作用和影响

帧中继（Frame Relay）是一种高效的数据链路层协议，主要用于广域网（WAN）中实现多节点之间的数据通信。它通过**虚电路（Virtual Circuit）**和统计复用技术，优化了传统分组交换网络（如X.25）的性能，特别适合带宽需求高、时延敏感的场景。一、帧中继的核心设计目标简化协…...

编程日记 2025/8/20 20:33:14

Python基本语法(类和实例)

类和实例类和对象是面向对象编程的两个主要方面。类创建一个新类型，而对象是这个类的实例，类使用class关键字创建。类的域和方法被列在一个缩进块中，一般函数也可以被叫作方法。 （1）类的变量：甴一个类…...

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

Netty的内存池机制怎样设计的？

大家好，我是锋哥。今天分享关于【Netty的内存池机制怎样设计的？】面试题。希望对大家有帮助； Netty的内存池机制怎样设计的？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Netty的内存池机制是为了提高性能&#xff…...

编程日记 2025/8/20 20:33:11

Python学习之路（七）-绘画and动画

Python 虽然不是专为图形设计或动画开发的语言，但凭借其丰富的第三方库，依然可以实现 2D/3D 绘画、交互式绘图、动画制作、游戏开发等功能。以下是 Python 在绘画和动画方面的主流支持方式及推荐库。建议前端web端展示还是用其他语言好╮(╯▽╰)╭ 一、Python 绘画支持（2D…...

编程日记 2025/8/23 5:48:34

【HarmonyOS 5】鸿蒙应用数据安全详解

【HarmonyOS 5】鸿蒙应用数据安全详解一、前言大家平时用手机、智能手表的时候，最担心什么？肯定是自己的隐私数据会不会泄露！今天就和大家唠唠HarmonyOS是怎么把应用安全这块“盾牌”打造得明明白白的，从里到外保护我们的信息…...

编程日记 2025/8/20 12:17:01

动态指令参数:根据组件状态调整指令行为

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/8/20 20:33:09

Linux：权限的理解

目录引言：为何Linux需要权限？ 一、用户分类与切换 1.1、用户角色 1.2、用户切换命令二、权限的基础概念 2.1、文件属性三、权限的管理指令 3.1、chmod：修改文件权限 3.2、chown与chgro：修改拥有者与所属组四、粘滞位…...

编程日记 2025/8/20 20:33:07

/etc/kdump.conf 配置详解

/etc/kdump.conf 是 Linux kdump 机制的核心配置文件，用于定义内核崩溃转储（vmcore）的生成规则、存储位置、过滤条件及触发后的自定义操作。以下是对其配置项的详细解析及常见用法示例： 一、配置文件结构文件通常位于 /etc/kdu…...

编程日记 2025/8/20 20:33:05

Redis 中简单动态字符串（SDS）的深入解析

在 Redis 中，简单动态字符串（Simple Dynamic String，SDS）是一种非常重要的数据结构，它在 Redis 的底层实现中扮演着关键角色。本文将详细介绍 SDS 的结构、Redis 使用 SDS 的原因以及 SDS 的主要 API 及其源码解析。 …...

编程日记 2025/8/20 20:33:04

GPIO引脚的上拉下拉以及转换速度到底怎么选

【摘要】本文讲述在进行单片机开发当中，新手小白常常为GPIO端口的种种设置感到迷惑，例如到底设置什么模式？它们之间的区别是什么？到底是设置上拉还是下拉电阻，有什么讲究？端口的输出速度又该如何设置&#…...

编程日记 2025/8/20 20:33:02

day16 numpy和shap深入理解

NumPy数组的创建 NumPy数组是Python中用于存储和操作大型多维数组和矩阵的主要工具。NumPy数组的创建非常灵活，可以接受各种“序列型”对象作为输入参数来创建数组。这意味着你可以将Python的列表（List）、元组（Tuple）…...

编程日记 2025/8/20 11:27:23

深入探索 51 单片机：从入门到实践的全面指南

深入探索 51 单片机：从入门到实践的全面指南一、引言在嵌入式系统发展的漫长历程中，51 单片机犹如一颗璀璨的明星，虽然诞生已有数十年，但至今仍在众多领域发挥着重要作用。它以结构简单、易于学习、成本低廉等优势&#xff0c…...

编程日记 2025/8/20 22:30:34