Webpack 是一款强大的前端资源模块化管理与打包工具，它能够高效整合、编译与打包复杂的现代 JavaScript 应用，同时支持处理 CSS、图片、字体等各类前端静态资源，是现代前端工程化体系中的核心构建工具。
Webpack 的打包流程始于初始化阶段，此阶段 Webpack 会读取项目配置文件（通常是 webpack.config.js），并与命令行传入的 CLI 参数进行合并，最终生成完整的编译配置，以此确定打包的具体行为。初始化阶段的核心任务包含：
入口文件：指定打包的起点文件，默认情况下 Webpack 会从 ./src 目录下的 index.js 文件开始构建，同时支持单入口、多入口配置以适配多页面应用
输出文件：定义打包后文件的输出路径、文件名与公共访问路径，常规打包产物默认输出至 dist/ 目录
模块解析规则：通过 module.rules 配置 Loader 处理规则，指定不同类型文件（如 .js、.css、.png 等）的加载与编译方式
运行模式配置：区分 development 开发模式与 production 生产模式，自动启用对应环境的基础优化策略
插件实例注册：加载配置中声明的 Plugin 插件，为后续编译流程做前置准备
确定入口文件后，Webpack 开始对入口文件及其引用的所有依赖模块进行递归解析。该阶段的核心工作包括：
解析文件中的各类导入语句（如 ES Module 的 import、CommonJS 的 require），定位所有依赖模块的真实路径
依据 resolve 相关配置完成路径解析，支持文件后缀自动补全、路径别名简化、模块查找范围自定义等能力
匹配配置中 module.rules 的规则，调用对应的 Loader 对非标准 JavaScript 文件进行预处理，将其转化为 Webpack 可识别的模块形式
随着模块解析的逐层深入，Webpack 会构建出包含项目所有模块及依赖关系的依赖图。 依赖图是 Webpack 打包流程的核心数据结构，它完整记录了模块间的引用关系、层级顺序与模块类型，明确了哪些模块需要被打包整合，为后续的代码合并、分割、优化提供了关键的数据依据。
进入代码转换阶段后，Webpack 会依托 Loader 机制对所有模块内容进行编译转换。Loader 遵循从右至左、从下至上的执行顺序，该阶段的核心工作包含：
非 JS 资源转换：将 CSS、图片、字体、Sass/Less 等资源转换为可被打包的模块形式
JS 语法兼容处理：通过 Babel 等工具将 ES6+ 等新特性语法编译为旧版浏览器可兼容的代码
拓展语法编译：支持处理 TypeScript、JSX、Vue 单文件组件等非标准 JS 语法
在生成完整的依赖图后，Webpack 正式进入模块打包环节。该阶段会将所有经过转换的模块代码整合封装，核心逻辑为：
按照依赖关系将模块代码合并为一个或多个浏览器可直接执行的 Chunk 代码块
若开启代码分割（Code Splitting）功能，可按入口、动态导入、第三方依赖拆分代码，生成多个轻量文件，实现页面按需加载，优化加载性能
处理模块间的依赖注入，保证代码运行时的执行顺序与依赖关联正常
输出是 Webpack 打包流程的最后一步，该阶段会将打包优化后的文件写入配置指定的目标目录。 此过程通常会结合各类 Plugin 完成最终优化，比如生产环境下的代码压缩、Tree Shaking 剔除无用代码、文件名添加哈希值实现长效缓存等，最终输出可直接部署到生产环境的静态资源文件。
