Q2 · Webpack

Webpack 5 源码核心模块有哪几个？分别是什么作用？

Webpack源码Compiler

⚡ 速记答案（30 秒）

Compiler：整个编译流程的总控，负责从配置到打包输出
Compilation：一次构建过程的抽象，管理模块、依赖图、优化、生成 chunk
Module：各种资源的模块表示（JS/CSS/图片），记录依赖和生成代码
Parser：把源码解析为 AST，收集 import / require 等依赖
Resolver：根据路径、alias、extensions 等解析模块真实文件
Chunk / ChunkGraph：打包输出的代码块及依赖关系

📖 详细讲解

Webpack 核心模块架构

webpack.config.js
      ↓
  Compiler (总控)
      ↓
  Compilation (一次构建)
      ↓
  Module + Parser + Resolver
      ↓
  Chunk / ChunkGraph
      ↓
  Template / Generator
      ↓
  输出文件

核心模块详解

模块	职责
Compiler	编译流程总控，单例
Compilation	一次构建的上下文
Module	模块抽象（NormalModule 等）
Parser	源码 → AST，提取依赖
Resolver	路径解析
ChunkGraph	chunk 依赖关系图
Template	生成最终代码

Tapable 钩子机制

Webpack 基于 Tapable 实现插件系统，所有核心模块都暴露钩子供插件订阅。

💡

面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。