[548] 吃透前端工程化，大厂级实战项目以战带练 – 网盘下载 - 慕课网名师 Sam 历时1年精心设计的体系好课

网盘链接：

1. 高薪就业：为什么前端工程化必须学？

• 1-1 工程化≠webpack
• 1-2 【预备知识】优雅学习课程，需要的知识储备
• 1-3 【增值服务】面试指导

2. 零基础：极速入门前端工程化基石之模块化技术

• 2-1 【起航】阶段概览
• 2-2 前端工程化发展历史
• 2-3 前端工程化的应用场景
• 2-4 前端工程化关键技术之模块化详解（上）
• 2-5 前端工程化关键技术之模块化详解（中）
• 2-6 前端工程化关键技术之模块化详解（下）
• 2-7 前端工程化关键技术之CommonJS规范详解（上）
• 2-8 前端工程化关键技术之CommonJS规范详解（下）
• 2-9 前端工程化关键技术之ESModule规范详解（上）
• 2-10 前端工程化关键技术之ESModule规范详解（下）
• 2-11 前端工程化关键技术之npm+webpack原理
• 2-12 ZBestPC工程化改造需求分析

3. 入门到进阶：玩转Webapck打包构建

• 3-1 webpack核心概念入门
• 3-2 webpack快速入门+基础代码演示
• 3-3 webpack source-map原理讲解
• 3-4 通过webpack loader打包css文件
• 3-5 css-loader打包文件源码解析（上）
• 3-6 css-loader打包文件源码解析（下）
• 3-7 创建属于自己的文件类型：自定义loader开发
• 3-8 webpack plugin入门+BannerPlugin源码解析
• 3-9 自定义webpack plugin实现自定义页脚注释

4. 原生js项目：零基础——项目源码分析+工程化改造流程分析

• 4-1 ZBestPC项目改造前源码分析
• 4-2 ZBestPC项目工程化存在的问题分析
• 4-3 工程化改造流程梳理和难点解析
• 4-4 【储备】项目预备知识梳理

5. 原生js项目：零基础——项目工程架构升级

• 5-1 原生js项目集成webpack
• 5-2 使用html-webpack-plugin实现自动注入bundle
• 5-3 首页css移植+webpack5图片打包新特性详解
• 5-4 首页js移植+ProvidePlugin注入全局变量
• 5-5 zbestpc项目登录页面移植

6. 原生js项目：进阶实战——如何实现项目性能优化？

• 6-1 项目优化进阶之多js分离
• 6-2 项目开发模式配置+CopyWebpackPlugin自动拷贝配置
• 6-3 性能优化之从bundle剥离css资源
• 6-4 性能优化之js&css压缩+treeshaking特性详解
• 6-5 精化：详细讲解treeshaking的使用前提和触发条件
• 6-6 划重点：详细讲解splitChunkj特性
• 6-7 利用ejs实现公共代码复用
• 6-8 利用CleanWebpackPlugin清空dist目录
• 6-9 【拓展】webpack常用优化手段

7. 原生js项目：进阶实战——原生js 升级 Vue 框架完整流程

• 7-1 webpack多配置文件改造
• 7-2 完成Vue项目构建前的准备工作
• 7-3 编写Vue项目构建配置文件
• 7-4 首页和登录页面移植到Vue框架
• 7-5 Vue MPA应用移植和工程问题解决
• 7-6 Vue2升级Vue3原理讲解+构建脚本升级
• 7-7 Vue2升级Vue3源码改造
• 7-8 【阶段任务】项目进阶升级改造
• 7-9 项目任务操作手册

8. 大型前端项目：进阶实战——架构升级需求分析+构建源码分析

• 8-1 vue2-elm架构升级需求分析
• 8-2 vue2-elm项目启动+构建命令分析
• 8-3 vue2-elm项目开发模式构建源码分析
• 8-4 深入理解开发模式下时为什么要启动express服务
• 8-5 http服务原理讲解+express服务快速搭建
• 8-6 express核心概念middleware深入讲解
• 8-7 express异常中间件和异常捕获机制详解
• 8-8 express https服务+静态资源服务搭建实战

9. 大型前端项目：进阶实战——深入解析Webpack热更新技术（HMR）原理

• 9-1 核心中间件：webpack-dev-middleware实例化源码解析
• 9-2 devMiddleware中间件核心处理逻辑解析
• 9-3 深入讲解HMR实现原理
• 9-4 hotMiddleware源码执行流程详解
• 9-5 HMR客户端实现原理详解
• 9-6 vue-cli构建源码流程梳理

10. 大型前端项目：进阶实战——Vue2升级Vue3框架

• 10-1 为什么要升级vue3——vue3与vue2对比
• 10-2 vue3升级流程分析+vue3依赖升级
• 10-3 vue2-elm项目启动脚本升级
• 10-4 项目vue3升级后编译错误的解决
• 10-5 vue-router和vuex语法升级
• 10-6 接口升级+图片链接升级
• 10-7 首页vue3语法升级
• 10-8 vuex和vue-router移植要点解析
• 10-9 vue3.2 setup语法糖升级

11. 大型前端项目：高阶实战——Webpack性能优化全面解析

• 11-1 webpack性能优化原理和目标
• 11-2 深入分析构建速度测量插件speed-measure-webpack-plugin
• 11-3 深入分析构建体积检测插件webpack-bundle-analyzer
• 11-4 构建性能优化之多进程thread-loader
• 11-5 【精华】webpack5分包策略详解
• 11-6 分包文件拷贝和模板的自动引用
• 11-7 利用webpack5 cache特性大幅提升构建性能
• 11-8 image-webpack-loader实现图片5倍压缩
• 11-9 purgecss-webpack-plugin优化css体积

12. 大型前端项目：尝鲜——Webpack5新特性通关

• 12-1 webpack4和5构建结果对比
• 12-2 webpack4和5缓存特性对比
• 12-3 webpack缓存插件hard-source-webpack-plugin
• 12-4 webpack4和5构建结果对比
• 12-5 webpack5高级特性：URIs解析
• 12-6 webpack5高级特性：TreeShaking和SideEffects
• 12-7 webpack5高级特性：模块联邦
• 12-8 webpack5高级特性：PackageExports

13. 工程化脚手架：零基础——工程化脚手架设计+脚手架快速入门和实战

• 13-1 为什么需要前端工程化脚手架？
• 13-2 深入脚手架的实现原理
• 13-3 脚手架开发流程介绍
• 13-4 快速搭建脚手架和脚手架本地调试方法
• 13-5 脚手架参数解析方法封装1
• 13-6 imooc-ls脚手架遍历文件功能实现
• 13-7 imooc-ls支持查询全部文件和列表渲染模式
• 13-8 深入讲解MacOS（含Linux）文件权限体系
• 13-9 解析MacOS（含Linux）文件类型和权限存储原理
• 13-10 应用fs.Stat的mode属性获取文件类型
• 13-11 使用与运算（&）获取文件权限
• 13-12 应用id命令获取用户信息
• 13-13 文件容量和创建时间的获取
• 13-14 文件夹下级文件数量功能开发
• 13-15 脚手架自动化测试流程讲解和脚本开发
• 13-16 文件类型+权限自动化测试脚本开发

14. 工程化脚手架：进阶实战——深入脚手架框架Commander+脚手架框架搭建

• 14-1 为什么要使用脚手架框架？
• 14-2 脚手架框架之框架搭建+参数解析1
• 14-3 脚手架框架之subcommand解析
• 14-4 commander框架帮助文档生成规则
• 14-5 commander options基础特性解析
• 14-6 commander options高级特性解析
• 14-7 高能：利用Option对象创建脚手架属性
• 14-8 自定义Option处理函数
• 14-9 高级特性：Option参数叠加处理1
• 14-10 Command基本用法解析
• 14-11 Argument高级用法解析
• 14-12 Commander action this用法+钩子函数
• 14-13 脚手架框架搭建之Node版本校验
• 14-14 脚手架框架搭建之命令注册

15. 工程化脚手架：进阶实战——工程化脚手架启动流程实战

• 15-1 Node文件监听chokidar库详解
• 15-2 chokidar实现原理和源码分析
• 15-3 通过chokidar实现config配置文件监听
• 15-4 划重点：Node启动子进程方法之execFile+exec
• 15-5 划重点：Node启动子进程方法之spawn+fork
• 15-6 子进程运行脚本获取默认端口号
• 15-7 Node实现端口号是否被占用功能校验
• 15-8 detect-port库源码分析
• 15-9 Node内置库net详解
• 15-10 命令行交互实现方案inquirer详解
• 15-11 实现配置文件修改后服务自动重启

16. 工程化脚手架：进阶实战——工程化脚手架构建服务实战

• 16-1 脚手架运行流程图绘制
• 16-2 重要：工程化脚手架核心服务架构设计
• 16-3 创建工程化脚手架配套配置文件
• 16-4 配置文件解析功能开发
• 16-5 fast-glob实现文件遍历功能
• 16-6 多类型配置文件结构解析（解决Node执行ESModue问题）
• 16-7 基于npmlog的公共日志类封装
• 16-8 配置文件修改时自动重启服务逻辑优化
• 16-9 高级特性：生命周期函数hooks注册
• 16-10 实现自定义hooks的触发逻辑
• 16-11 高级特性：json配置支持function传入
• 16-12 模块加载问题修复和模块加载原理解析
• 16-13 插件注册逻辑开发
• 16-14 高级特性：webpack-chain详细讲解
• 16-15 webpack-chain支持loader和plugin配置
• 16-16 插件运行功能开发
• 16-17 imooc-build插件实现webpack配置修改
• 16-18 插件间状态共享+自定义hook功能实现
• 16-19 自定义webpack路径功能支持
• 16-20 内置插件功能实现

17. 工程化脚手架：高阶实战——深入工程化脚手架插件机制+Vue插件开发

• 17-1 webpack初始配置mode开发
• 17-2 entry和output配置移植
• 17-3 webpack loader配置移植
• 17-4 webpack plugin配置移植
• 17-5 webpack optimization配置移植
• 17-6 webpack构建逻辑开发
• 17-7 编译错误和警告逻辑处理+构建时间获取
• 17-8 工程化脚手架处理html模板
• 17-9 WebpackDevServer API启动服务开发
• 17-10 文件修改监听+dev和build模式插件分离
• 17-11 zbest-pc项目工程化脚手架移植
• 17-12 zbest-pc项目HtmlWebpackPlugin插件配置定制
• 17-13 vue3项目工程化插件开发
• 17-14 通用vue插件开发和npm发布
• 17-15 高级：imooc-build插件集成vue-cli构建器

18. 工程化脚手架：高阶实战——Babel工程化实战+React插件开发

• 18-1 React项目运行原理解析
• 18-2 React Hooks状态管理+组件化
• 18-3 React JSX+Babel开发模式
• 18-4 React Babel生产环境编译
• 18-5 Babel编译原理解析
• 18-6 super-tiny-compiler编译器原理分析
• 18-7 super-tiny-compiler编译器之词法解析
• 18-8 super-tiny-compiler编译器之AST生成
• 18-9 super-tiny-compiler编译器之AST转换
• 18-10 super-tiny-compiler编译器之代码生成
• 18-11 Babel typescript预设功能详解
• 18-12 Babel preset混合实现tsx编译
• 18-13 webpack+babel-loader实现模块化+jsx编译
• 18-14 CRA项目初始化+react-scripts启动源码分析
• 18-15 zbestpc项目移植React
• 18-16 zbestpc项目集成ReactRouter
• 18-17 react项目集成工程化脚手架

19. 抢先实战：零基础——Vite快速入门

• 19-1 什么是vite？它为什么能这么快？
• 19-2 vite从零开发原生js项目
• 19-3 vite如何打包和发布原生js项目？
• 19-4 vite支持vue3项目开发
• 19-5 vite支持react18项目开发
• 19-6 如何让vite打包代码支持低版本浏览器运行？
• 19-7 vite vue+react官方项目模板搭建
• 19-8 破解vite插件机制
• 19-9 为什么vite这么快？——vite实现机制详解

20. 抢先实战：进阶实战——Vite接入工程化脚手架

• 20-1 wp2vite移植zbestpc项目工程化配置
• 20-2 rollup-plugin-inject解决全局变量注入
• 20-3 模板文件编译和注入
• 20-4 vite+vue3项目移植
• 20-5 工程化脚手架build命令开发
• 20-6 zbestpc项目build命令改造
• 20-7 工程化脚手架vite插件开发
• 20-8 zbestpc项目移植imooc-build+vite脚手架

21. 加餐：高阶实战——彻底搞懂前端性能监控和优化

• 21-1 什么是前端性能？
• 21-2 深入剖析前端性能监控原理（上）
• 21-3 深入剖析前端性能监控原理（下）
• 21-4 如何监控前端性能？
• 21-5 PerformanceEntry解决监控精度和多资源性能监控问题
• 21-6 性能指标核心概念讲解：fp、fcp和lcp
• 21-7 性能监控和性能度量之PerformanceObserver
• 21-8 Chrome Performance用法教学
• 21-9 分享前端性能监控平台架构设计
• 21-10 前端性能优化方法总结

22. 加餐：高阶实战——webpack5源码解析

• 22-1 webpack5源码调试方法
• 22-2 webpack5脚手架源码解析
• 22-3 webpack-cli初始化流程分析1
• 22-4 webpack-cli配置构建逻辑分析
• 22-5 webpack compiler实例化流程分析
• 22-6 webpack5 配置初始化源码分析
• 22-7 compiler实例化+内置插件注册和执行机制源码分析
• 22-8 webpack5编译流程原理分析+核心插件源码分析
• 22-9 构建前准备阶段源码分析
• 22-10 模块工厂NormalModuleFactory实例化源码分析
• 22-11 webpack模块编译对象Compilation实例化源码分析
• 22-12 compilation钩子执行逻辑分析
• 22-13 webpack模块实例化源码分析
• 22-14 webpack 编译阶段源码分析

23. 加餐：高阶实战——vue-loader源码解析

• 23-1 loader执行流程和pitch loader解析
• 23-2 vue-loader关键实现——webpack动态新增模块能力
• 23-3 vue-loader关键实现——自定义loader执行
• 23-4 VueLoaderPlugin源码解析——如何实现plugin和loader通信？
• 23-5 vue-loader核心逻辑——vue源码block编译
• 23-6 vue-loader pitcher源码分析
• 23-7 templateLoader和stylePostLoader源码分析
• 23-8 vue-loader完整执行流程复盘

24. 加餐：高阶实战——vue-cli5源码解析

• 24-1 准备工作——vue-cli5版本项目创建
• 24-2 vue-cli5启动流程源码分析——Service实例化
• 24-3 vue-cli5 serve命令执行之init源码分析
• 24-4 深入vue-cli5 插件——了解vue-cli插件机制和插件功能
• 24-5 vue-cli5 webpack配置解析源码分析
• 24-6 vue-cli5 webpack打包和运行源码分析
• 24-7 vue-cli5 build命令源码分析