Webpack 是主流模块打包器，通过入口文件构建依赖图，将各类资源视为模块并用 loader 转换，封装为自执行函数实现模块化执行，Plugin 则在构建全周期介入优化输出。
JavaScript 中的打包工具，核心是解决模块化代码如何组织、依赖分析和最终输出的问题。Webpack 是其中最主流的模块打包器（module bundler），它不只处理 JS，还能通过扩展机制统一管理 CSS、图片、字体等各类资源。
Webpack 的入口与依赖图构建
Webpack 从一个或多个入口文件（entry）开始，比如 ./src/index.js，逐行扫描 import、require 等语句，识别出当前模块所依赖的其他模块。这个过程会递归进行，直到所有直接、间接依赖都被纳入——最终形成一张完整的依赖关系图（dependency graph）。
- 单入口配置时，整张图被打包成一个 bundle（如
main.js） - 多入口时，每个入口独立构建自己的子图，生成对应 chunk（如
home.js、about.js） - 相同模块被多个入口引用，Webpack 默认只打包一次，避免重复
一切皆模块：Webpack 如何理解不同文件类型
在 Webpack 看来，每个文件都是一个模块——不只是 .js，还包括 .css、.png、.vue 甚至 .md。但它原生只认识 JavaScript 和 JSON，其余类型必须靠 loader 转换：
-
css-loader把 CSS 字符串转成 JS 模块，支持import './style.css' -
file-loader或asset-module把图片转为 URL 或 base64 内联 - loader 执行顺序是从右到左（如
['style-loader', 'css-loader']先处理 css，再注入 DOM）
模块如何被封装与执行
打包后的代码不是简单拼接，而是被包裹进一个自执行函数中，内部实现了一个轻量版的 require 函数（__webpack_require__）：
立即学习“Java免费学习笔记（深入）”；
- 每个模块按路径或 ID 编号，存入一个对象（
{"./src/index.js": function(){...}, "./src/utils.js": function(){...}}） - 首次加载某模块时，创建
module对象并缓存其exports - 后续调用
__webpack_require__(moduleId)直接返回缓存结果，模拟 Node.js 的模块缓存机制
插件（Plugin）介入整个构建生命周期
Loader 处理单个文件，Plugin 则在更宏观的阶段起作用，比如：
-
HtmlWebpackPlugin自动生成index.html并自动引入 bundle -
MiniCssExtractPlugin把 CSS 从 JS 中抽离成独立文件 -
TerserPlugin压缩 JS 代码，启用 tree-shaking 删除未使用导出 - 所有 Plugin 都基于 Webpack 的事件流（如
compile、emit），在特定时机插入逻辑
基本上就这些。Webpack 的本质，是用 Node.js 构建一套可扩展的“模块翻译+组装流水线”，loader 是翻译员，plugin 是质检员和包装工，而最终输出的 bundle 就是能直接在浏览器里跑的“自包含模块系统”。
