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 代码或其他格式。
- 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 的模块打包本质是“以入口为起点，分析依赖，转换资源，最终合成可运行的静态文件”。虽然配置可能复杂，但其设计逻辑清晰，围绕模块化这一核心理念展开。掌握这些原理，能帮助开发者更高效地调试构建问题并合理配置项目。不复杂但容易忽略。
