依赖关系图

Webpack 的依赖关系图（Dependency Graph）是其核心机制，用于管理和优化模块间的依赖关系。

依赖关系图是 Webpack 从 入口文件（Entry） 开始，通过递归分析模块间的引用关系（如 import、 require ）构建的树状结构。该图包含应用程序所需的所有模块（JavaScript、CSS、图片等），并最终将这些模块打包为 Bundle 文件。

Webpack 的模块解析基于 enhanced-resolve 库实现，支持多种模块类型（ES6、CommonJS、AMD、Assets 等）和路径解析规则。

构建过程

• 入口解析：Webpack 从配置的入口文件（如 entry: './src/index.js' ）开始，识别其直接依赖的模块（如通过 import 引入的模块）。
• 递归遍历：每个模块的依赖会被进一步解析，形成递归遍历。例如，若 index.js 依赖 utils.js ，而 utils.js 又依赖 lodash ，Webpack 会依次将三者加入依赖图。
• AST 分析与依赖收集：借助 @babel/parser 生成抽象语法树（AST），再通过 @babel/traverse 提取模块中的依赖路径，最终生成完整的依赖关系图。
• 代码转换与打包：使用 Loader 转换非 JavaScript 模块（如 CSS、TypeScript），并通过插件（Plugins）优化代码结构，最终生成 Bundle。

依赖图的作用

• 代码分割（Code Splitting）：将依赖图拆分为多个 Bundle，按需加载以减少初始加载时间。例如，通过动态导入（ import() ）实现按需加载。
• 优化 HTTP 请求：对 HTTP/1.1 应用，合并模块减少请求次数；对 HTTP/2 应用，利用代码分割进一步优化并行加载。
• 缓存机制：基于模块内容哈希生成文件名，结合持久化缓存（Webpack 5+特性）提升重复构建效率。

可视化工具

通过 webpack-bundle-analyzer 插件，可将依赖图以交互式树状图展示，直观显示各模块体积及依赖关系，帮助开发者优化 Bundle 结构。

配置示例：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [ new BundleAnalyzerPlugin() ]
};

模块解析规则

Webpack 的 Resolvers 负责解析模块路径，支持以下特性：

• 别名（Alias）：通过 resolve.alias 简化路径引用（如 @: './src' ）；
• 扩展名自动补全：默认补全 .js 、 .json 等后缀；
• 模块优先级：按 resolve.modules 配置的目录顺序查找模块。