仅表达个人学习观点
Webpack 核心是 "事件驱动的插件化架构" 。------ 打包流程是固定的 "流水线"，而钩子（Hooks）是流水线上的 "触发节点"，插件（Plugin）则是在这些节点上 "干活的工具"。
一、核心概念
- entry：入口模块文件路径
- output：输出bundle文件路径
- module：模块，webpack构建对象
- bundle：输出文件，webpack构建产物
- chunk：中间文件，webpack构建的中间产物
- loader：文件转换器
- plugin：插件、执行特定任务
二、核心原理
Webpack 本质是一个 "模块打包工厂"，核心流程就像工厂生产产品：
- 原料 ：项目里的 JS、CSS、图片等模块（import/require 引入的文件）；
流水线：Webpack 内置的打包流程（从找入口文件 → 解析模块 → 转换资源 → 生成文件）； - 触发节点（钩子）：流水线上的关键步骤（如 "开始打包""模块解析完成""文件输出前"）；
- 工具（plugin）：挂在 "触发节点" 上的工具，能在特定步骤执行自定义逻辑（如生成 HTML、压缩代码）；
- 产品：dist 文件夹里的最终静态文件。
Webpack 打包 = 固定流水线 + 钩子 + plugin（插件） + loader（文件转换）
三、核心打包流程（流水线细节）
入口js文件（entry），这个文件会引用不同的js模块或css模块，所有的这些都是从entry打包，然后依次查找它们的依赖路径，将这个entry最终打包成bundle文件，在打包过程中会生成一些中间文件（chunk）
1. 初始化阶段（准备工作）
- 读取 webpack.config.js 配置（入口、出口、Loader、Plugin 等）；
- 创建 Compiler 实例（全局唯一，负责管理整个打包生命周期，保存所有配置和钩子）；
- 加载所有配置的 Plugin（插件会在这一步注册到对应的钩子上）。
2. 编译阶段（解析模块依赖）
- 从 entry 入口文件开始，递归解析所有 import/require 依赖，形成一个 "模块依赖图"（比如 index.js 依赖a.js，a.js 依赖 style.css，都会被纳入图中）；
- 遇到非 JS 模块（如 CSS、图片），调用对应的 Loader 进行转换（比如 css-loader 解析 CSS依赖，style-loader 转换为
<style>标签）； - 此阶段的核心是 Compilation 实例（每次打包都会创建一个，负责管理 "模块" 和 "chunk"，比如模块解析、代码合并）。
3. chunk 生成阶段（模块合并）
- 把 "模块依赖图" 中的模块，按规则合并成 Chunk（代码块，比如入口 chunk、异步 chunk）；
- 比如入口文件 index.js 及其依赖的所有模块，会合并成一个默认的 main chunk。
4. 输出阶段（生成最终文件）
- 把 Chunk 转换成浏览器能识别的静态文件（如 bundle.js、图片文件）；
- 处理文件命名（如 [name].[hash].js）、路径（dist 文件夹），清空旧文件（clean: true）；
- 最终把文件写入磁盘。
5. 结束阶段
触发 "打包完成" 钩子，插件可在此执行后续操作（如打印打包耗时、上传文件到服务器）。
四、Webpack生命周期中的重要钩子
- Compiler：全局唯一，管 "整个生命周期"（从开始到结束）；
- Compilation：每次打包的 "临时实例"，管 "模块和 chunk 的处理"（比如修改代码、合并模块）。