Webpack是静态模块打包器，将资源视为模块，通过依赖图打包为浏览器可运行文件；依赖图从入口递归分析import等语句生成；模块被包裹函数实现作用域隔离；loader处理非JS文件，plugin扩展构建流程；支持代码分割与哈希命名优化缓存。
Webpack 是一个静态模块打包器，它把项目中所有资源（JS、CSS、图片等）都当作模块处理，通过依赖图把它们打包成浏览器可
运行的文件。
模块打包的核心：依赖图
Webpack 从你配置的入口文件（如 index.js）开始，递归分析代码中的 import、require、define 等语句，找出所有被引用的模块，形成一棵依赖树。这棵树决定了哪些文件要被包含、以什么顺序执行。
- 每个模块在打包后会被包裹一层函数，实现作用域隔离
- Webpack 自己提供了一个简单的 __webpack_require__ 函数来模拟 Node.js 的 require 行为
- ES6 import/export 会被转换成 Webpack 内部的模块系统调用
Loader：让 Webpack 理解非 JS 文件
原生 Webpack 只能处理 JavaScript。遇到 CSS、TypeScript、Vue 单文件等，需要靠 loader 转换内容为 JS 模块。
- babel-loader 把 ES6+ 语法转成兼容性更好的 ES5
- css-loader + style-loader 解析 CSS 中的 @import 和 url()，再把样式注入页面
- file-loader / asset-module 处理图片、字体等资源，生成哈希文件名并返回路径
Plugin：扩展构建流程的能力
Loader 处理单个文件，Plugin 则在构建生命周期的特定时机做更宏观的操作。
- HtmlWebpackPlugin 自动生成 HTML，并自动引入打包后的 JS/CSS
- MiniCssExtractPlugin 把 CSS 提取成独立文件（而不是内联在 JS 中）
- DefinePlugin 在编译时注入全局常量，比如 process.env.NODE_ENV
输出与分包：提升加载性能
Webpack 支持按需分割代码，避免首屏加载过大。
- SplitChunksPlugin（默认启用）自动提取公共模块（如多个入口共用的工具函数）
- 动态 import() 触发代码分割，生成异步 chunk，配合 React.lazy 实现路由懒加载
- 输出文件名支持占位符，如 [name].[contenthash:8].js，确保内容不变时缓存有效
不复杂但容易忽略的是：Webpack 打包结果不是“运行时解释”，而是提前编译好的可执行 JS；它的强大来自 loader 和 plugin 的组合能力，而非语法本身。
