Webpack学习——原理理解

仅表达个人学习观点Webpack 核心是 “事件驱动的插件化架构” 。—— 打包流程是固定的 “流水线”而钩子Hooks是流水线上的 “触发节点”插件Plugin则是在这些节点上 “干活的工具”。一、核心概念entry入口模块文件路径output输出bundle文件路径module模块webpack构建对象bundle输出文件webpack构建产物chunk中间文件webpack构建的中间产物chunk 是逻辑代码块而非物理文件是 webpack对模块的 “分组”比如入口 chunk、异步加载的 chunk最终会被编译成物理的 bundle 文件一个 chunk 对应一个 / 多个 bundle取决于分包策略loader文件转换器只负责 “文件内容的转换”把非 JS 模块转成 webpack 能识别的模块比如把 CSS 转成 JS 模块、把 TS 转成 JS聚焦 “文件级别的处理”plugin插件、执行特定任务负责 “打包流程的干预”比如生成 HTML、压缩代码、清空 dist、分包策略聚焦 “流程级别的操作”可以监听钩子并修改打包结果。二、核心原理Webpack 本质是一个 “模块打包工厂”核心流程就像工厂生产产品原料项目里的 JS、CSS、图片等模块import/require 引入的文件流水线Webpack 内置的打包流程从找入口文件 → 解析模块 → 转换资源 → 生成文件触发节点钩子流水线上的关键步骤如 “开始打包”“模块解析完成”“文件输出前”工具plugin挂在 “触发节点” 上的工具能在特定步骤执行自定义逻辑如生成 HTML、压缩代码产品dist 文件夹里的最终静态文件。Webpack 打包 固定流水线 钩子 plugin插件 loader文件转换三、核心打包流程流水线细节入口js文件entry这个文件会引用不同的js模块或css模块所有的这些都是从entry打包然后依次查找它们的依赖路径将这个entry最终打包成bundle文件在打包过程中会生成一些中间文件chunk3.1 初始化阶段准备工作第一步读取和合并webpack.config.js配置入口、出口、Loader、Plugin 等第二步创建Compiler实例全局唯一负责管理整个打包生命周期保存所有配置和钩子第三步加载所有配置的Plugin插件会在这一步注册到对应的钩子上。如何自定义插件请看Webpack学习——Plugin插件3.2 编译启动阶段创建 Compilation 实例每次打包都会创建一个负责管理 “模块” 和 “chunk”比如模块解析、代码合并触发 compilation 钩子通知插件本次编译开始3.3 正式编译阶段解析模块依赖1、从 entry 入口文件启动编译2、Compilation 先将入口 JS 模块解析为 AST抽象语法树通过遍历语法树精准提取 import/require 等依赖语句若为纯 JS 模块则直接完成解析若遇到非 JS 模块如 CSS、图片则先匹配并调用对应 Loader 链将其转换为可识别的 JS 模块代码3、再对转换后的 JS 代码重新解析 AST提取该模块内部的依赖如 CSS 中的图片、import 样式文件随后递归处理每一个新提取的依赖模块以 “单个模块为最小单位”边解析边转换—— 依赖链上的模块严格串行处理无依赖的兄弟模块则并行优化直至所有依赖遍历完成最终由 Compilation 汇总所有模块状态形成完整的模块依赖图为后续生成 Chunk 和输出 bundle 做好准备。3.4 chunk 生成阶段模块合并把 “模块依赖图” 中的模块按规则合并成Chunk代码块比如入口 chunk、异步 chunk比如入口文件 index.js 及其依赖的所有模块会合并成一个默认的 main chunk。3.5 输出阶段生成最终文件把 Chunk 转换成浏览器能识别的静态文件如bundle.js、图片文件处理文件命名如 [name].[hash].js、路径dist 文件夹清空旧文件clean: true最终把文件写入磁盘。3.6 结束阶段触发 “打包完成” 钩子插件可在此执行后续操作如打印打包耗时、上传文件到服务器。四、Webpack生命周期中的重要钩子Compiler全局唯一管 “整个生命周期”从开始到结束Compilation每次打包的 “临时实例”管 “模块和 chunk 的处理”比如修改代码、合并模块。