Webpack 从入口文件出发，分析模块依赖并构建依赖图，通过 Loader 转换非 JS 资源，最终将所有模块打包成静态文件，支持代码分割与插件扩展，实现高效模块化构建。
Webpack 是现代 JavaScript 应用中最常用的模块打包工具之一。它的核心作用是将项目中各种类型的资源——如 JavaScript、CSS、图片、字体等——视为模块，并通过依赖关系将它们打包成一个或多个静态资源文件。理解 Webpack 的模块打包原理，有助于更好地优化构建流程和提升开发效率。
模块化与依赖分析
Webpack 从一个或多个入口文件（entry）开始，递归地解析代码中的模块引入语句，比如 import 或 require。每遇到一个模块引用，Webpack 就会将其作为一个新的模块加入依赖图谱。
在这个过程中，Webpack 构建出一张完整的依赖关系图（Dependency Graph），这张图包含了应用所需的所有模块及其相互关系。这个图是后续打包和优化的基础。
- 支持 ES6 模块、CommonJS、AMD 等多种模块规范
- 静态分析代码，提取 import/require 路径
- 每个文件被当作一个独立模块处理
加载器（Loader）处理非 JavaScript 资源
JavaScript 原生并不支持直接导入 CSS、图片或 TypeScript 文件。Webpack 通过 Loader 机制扩展了模块的处理能力，使这些非 JS 资源也能被纳入打包流程。
立即学习“Java免费学习笔记（深入）”；
Loader 实质上是一个转换函数，接收原始文件内容作为输入，返回转换后的 JavaScript 代码或其他格式。
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- babel-loader：将 ES6+ 语法转为浏览器兼容的 ES5
- css-loader：解析 CSS 中的 @import 和 url() 依赖
- file-loader 或 url-loader：处理图片、字体等静态资源
- 多个 Loader 可以链式调用，顺序从右到左执行
打包生成输出文件
在完成依赖收集和资源转换后，Webpack 将所有模块封装进一个闭包中，避免变量污染全局作用域。每个模块被分配一个唯一 ID，并存入一个大的模块对象中。
最终生成的 bundle.js 包含一个运行时（runtime）代码，负责模块的加载、执行和缓存管理。
- 使用立即执行函数（IIFE）包裹模块系统
- 实现 __webpack_require__ 函数模拟模块加载机制
- 支持代码分割（Code Splitting），按需加载 chunk
- 可通过配置生成多个输出文件（如 vendor、main 等）
插件系统扩展功能
除了基本打包能力，Webpack 提供了强大的插件接口，允许在构建生命周期的各个阶段介入操作。
插件可以执行更复杂的任务，比如优化产物、注入环境变量、清理输出目录等。
- HtmlWebpackPlugin：自动生成引入 bundle 的 HTML 文件
- MiniCssExtractPlugin：将 CSS 提取为独立文件
- DefinePlugin：定义编译时的全局常量
- 插件通过监听 compiler 和 compilation 钩子实现定制逻辑
基本上就这些。Webpack 的模块打包本质是“以入口为起点，分析依赖，转换资源，最终合成可运行的静态文件”。虽然配置可能复杂，但其设计逻辑清晰，围绕模块化这一核心理念展开。掌握这些原理，能帮助开发者更高效地调试构建问题并合理配置项目。不复杂但容易忽略。
