Webpack5 核心原理与应用实践
课程详情
课程详情
本课程由浅入深，全面解析Webpack 5.0的核心原理与应用实践。课程内容涵盖从场景化工程搭建技巧，到构建与应用性能优化技巧，再到Loader、Plugin组件开发，最终落地到源码级剖析Webpack执行原理。
Webpack在现代Web应用开发中占据重要地位，尽管近年来新型构建工具如Vite、Rollup等出现，Webpack依然拥有高达89%的使用率，是前端工程化工具中的佼佼者。
Webpack 5.0功能集庞大，包括模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、Sourcemap、Module Federation、devServer等。然而，Webpack的生态复杂度也相应提高，学习难度较大。
- Webpack包含接近500份JS文件，400+种Class；
- 7.4万行代码，2万行注释；
- 160+个内置插件，200+个hook；
- 数千种社区组件。
本课程旨在帮助学员掌握Webpack的核心原理和应用技巧，包括：
- 基本用法：以更结构化方式介绍Webpack及常用组件的用法，并结合具体应用场景讲解各自特有的构建需求与相关实现；
- 性能优化：讲解如何衡量Webpack构建性能，介绍各项常见的构建、产物性能优化手段及其背后的实现原理；
- 自定义组件：讲解Webpack Loader、Plugin的作用与基本形态，以及具体的开发技巧与辅助工具；
- 核心原理：讲解Webpack 5.0的核心原理，包括构建过程、Chunk分包规则、Loader/Plugin与Webpack核心架构、模块转译与打包原理、Tree-Shaking原理等。
提示：虽然Webpack 5.0更新力度很大，但多数功能、实现原理均可套用到Webpack 4.0上，课程内容具有普适性。
通过本课程的学习，学员将构建起更成熟、体系化的Webpack知识结构，提升前端工程化能力。
课程目录
重新认识 Webpack：旧时代的破局者 如何理解 Webpack 配置底层结构逻辑？ 如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？ 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？ 如何搭建 Vue 全栈开发环境？ 如何搭建 React 全栈开发环境？ 使用 Webpack 构建 NPM Library 的正确方式 使用 Webpack 构建微前端应用 如何借助 Webpack 开发 PWA、Node、Electron 应用？ 深入理解图像加载原理与最佳实践 深入理解 Webpack 核心配置结构 构建性能：分享 7 款常用的性能分析工具 如何使用 Webpack 持久化缓存大幅提升构建性能？ Webpack 都有哪些实现并行构建的方法？ 有哪些值得学习的构建性能极致优化技巧？ 如何正确使用 SplitChunks提升应用性能？ 不止 Terser：揭秘代码压缩的门门道道 还有哪些值得学习的应用性能极致优化技巧？ Loader 开发基础：从开源项目学到的 Loader 开发技巧 Loader 开发进阶：如何用好 Loader 扩展开发工具？ 插件开发基础：实例剖析插件基本形态与架构逻辑 插件开发进阶：如何提升插件健壮性？ 插件架构：Hook 体系是如何影响 Webpack 架构的？ Init、Make、Seal：真正读懂 Webpack 核心流程 Dependency Graph：如何管理模块间依赖？ Chunk：三种产物的打包逻辑 Runtime：模块编译打包及运行时逻辑 Tree-shaking：如何删除无用模块导出？ Sourcemap：源码映射原理与应用技巧 HMR：如何动态替换页面代码？
