体系课-吃透前端工程化，大厂级实战项目以战带练 | 完结

如果你现在还不了解前端工程化，将注定与大厂无缘

系统掌握前端工程化，轻松驾驭前端研发生命周期全流程

慕课网名师 Sam 历时1年精心设计的体系好课

高度还原大厂工程化项目落地流程，以工程化思维逐个击破难点痛点

课程目录

第1章 高薪就业：为什么前端工程化必须学？ 3 节5分钟

前端工程化≠Webpack ，真正的前端工程化覆盖一个项目从创建到开发到发布的整个流程，既是目前大厂主流的项目提效方案，更是高薪面试 “必考项”！从本章开始，让我们一起跟随 Sam 老师，开启“前端工程化”得升级之旅吧！...
视频：1-1 工程化≠webpack
图文：1-2 【预备知识】优雅学习课程，需要的知识储备
图文：1-3 【增值服务】面试指导

第2章 零基础：极速入门前端工程化基石之模块化技术12 节129分钟

前端工程化是如何一步步发展到今天的？它在现阶段开发中的起到了怎样关键的影响和作用？本章将借助前端工程化的发展历史，带大家重新认识前端工程化的应用场景、适用范围和其中的关键技术，如：CommonJS、ESModule、npm、webpack等...
视频：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打包构建9 节76分钟

公司老旧原生项目需要改造，如何优雅应用工程化得思维排雷? 从本章开始，将与大家一起完成“原生js项目的工程化架构升级”得任务，通过该项目实战，你将正式入门前端工程化，成为前端工程化开发领域的实践者！在全面掌握和实践工程化知识体系的同时，开发效率也将获得显著提升！工欲善其事必先利其器，让我们先来认识一下...
视频：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 节17分钟

知己知彼，才能百战百胜！本章将带你在认识项目源码的同时，梳理工程化改造的流程以及其中需要重点关注的问题，做好战情分析，更加从容的迎击！
视频：4-1 ZBestPC项目改造前源码分析
视频：4-2 ZBestPC项目工程化存在的问题分析
视频：4-3 工程化改造流程梳理和难点解析
图文：4-4 【储备】项目预备知识梳理

第5章 原生js项目：零基础——项目工程架构升级5 节39分钟

本章将带你完成原生JS项目工程化改造的第一步：从搭建项目框架、将html、js、css原生代码移植到项目中，到进行相应的webpack处理，以工程化的思维破圈。
视频：5-1 原生js项目集成webpack
视频：5-2 使用html-webpack-plugin实现自动注入bundle
视频：5-3 首页css移植+webpack5图片打包新特性详解
视频：5-4 首页js移植+ProvidePlugin注入全局变量
视频：5-5 zbestpc项目登录页面移植

第6章 原生js项目：进阶实战——如何实现项目性能优化？9 节65分钟

本章将完成原生项目的进阶升级，将囊括各种工程化的高级技巧，包括：js/css文件分离、treeshaking原理和应用、splitChunk、ejs模板等等处理。理论和实践都不放过，干货满满，不容错过！
视频：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框架完整流程9 节55分钟

企业实际应用中，我们往往会应用MVVM框架进一步提升开发效率，本章我们将对原生项目使用Vue框架进行升级，还会同时实现Vue MPA、Vue SPA两种运行模式，彻底带大家搞懂如何将webpack模块化升级到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-9 项目任务操作手册

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

大型前端项目提出改造需求，什么样的工程化解决方案更实用？从本章开始，将与大家一起完成“Vue2-Vue3项目工程化架构升级”得任务，通过该项目实战，你将拥有更广阔的开发思路，在企业工程化架构升级中更快上手，成为前端工程化架构升级最优方案的提供者。在项目工程化改造准备环节，Sam老师将从升级需求和构建源码两个角度...
视频：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）原理6 节57分钟

理论实践不分家。打好理论基础，才能更好实战开发。想要对vue2-elm进行完美的工程化架构升级，那你一定要知道这个核心中间件： devMiddleware。除了这个插件外，本章还会对其他webpack插件进行详解，包括：HMR、vue-cli、hotMiddleware等。...
视频：9-1 核心中间件：webpack-dev-middleware实例化源码解析
视频：9-2 devMiddleware中间件核心处理逻辑解析
视频：9-3 深入讲解HMR实现原理
视频：9-4 hotMiddleware源码执行流程详解
视频：9-5 HMR客户端实现原理详解
视频：9-6 vue-cli构建源码流程梳理

第10章 大型前端项目：进阶实战——Vue2升级Vue3框架9 节52分钟

你知道如何对vue2项目进行vue3升级吗？你知道进行vue3升级时需要重点关注哪些内容吗？比你高薪的同事可能早已掌握了这些，快跟随课程行动起来吧！！本章内容将带你实现vue2项目的vue3项目升级，全面拥抱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性能优化全面解析9 节75分钟

大型前端项目工程庞大而复杂，因此，我们在对其进行性能优化的同时，更要深入理解其核心插件的实现原理，才能真正掌握如何应用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新特性通关8 节87分钟

完成了项目的性能优化后，我们还要紧跟时代脚步，对项目进行webpack5的全面升级。包括升级原项目中webpack4语法，升级webpack-cli版本、module语法，还添加了css-minimizer-webpack-plugin插件。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章 工程化脚手架：零基础——工程化脚手架设计+脚手架快速入门和实战16 节121分钟

大型前端团队技术栈庞杂、技术体系不一致，如何统一团队的工程体系、实现工程规范和标准对齐？从本章开始，将与大家一起完成“imooc-build 工程化脚手架开发”的任务，通过该项目实战，你将能够独立完成对大型项目的前端工程化架构升级以及工程化脚手架的搭建，成为前端工程化架构升级的领导者。在正式启动之前，让我们先...
视频：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 节121分钟

在明确了工程化脚手架的实际应用场景后，我们更清楚了脚手架需要实现的功能。接下来，让我们正式进入脚手架的开发搭建工作吧！
视频：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章 工程化脚手架：进阶实战——工程化脚手架启动流程实战11 节119分钟

脚手架需要实现的核心功能之一，即统一底层打包流程。这个功能需要我们开发build模块，本章就将带领大家实现 build 命令的逻辑，完成build命令的实现及配置。
视频：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章 工程化脚手架：进阶实战——工程化脚手架构建服务实战20 节227分钟

脚手架需要实现的另一个核心功能，即统一项目底层启动命令。而在这个功能中，我们需要开发出dev模块。本章将带领大家添加 start 命令并实现其逻辑。完成脚手架两大核心功能的开发。
视频：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插件开发15 节151分钟

干货不嫌多！带大家开发完脚手架核心功能后，我们还未大家准备了脚手架开发的进阶内容：插件能力开发。无论需求怎么提，你都能轻松稳住。
视频：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插件开发17 节175分钟

在学习了vue插件开发之后，我们将来学习前端工程化中另一流行框架React插件的开发，本章就将从React原理解析开始，深度解析super-tiny-compiler编译器实现原理，从zbestpc项目移植到react项目集成工程化脚手架，彻底搞懂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快速入门9 节68分钟

本章将带领大家快速入门Vite的基础实战，并讲解Vite原理和Webpack的区别等内容
视频：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接入工程化脚手架8 节68分钟

本章通过zbestpc Vite改造+工程化脚手架接入，完成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章 加餐：高阶实战——彻底搞懂前端性能监控和优化10 节86分钟

本章将从前端性能优化的本质说起，带大家彻底搞懂如何做前端性能监控和优化
视频：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源码解析14 节128分钟

在项目中我们用到了那么多webpack5技术，怎么能没有深度的源码解析呢？本章就将深度解析webpack实现原理和核心源码，彻底搞懂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源码解析 8 节98分钟

vue-loader代表了一个非常复杂的webpack loader，通过对vue-loader的深度解析，不仅可以讲透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源码解析7 节80分钟

vue-cli5脚手架搭建运行是课程中非常具有难度的一环。为了让大家更好的掌握vue-cli脚手架的实现原理，我们将深入探究vue-cli5源码，包括实现原理、执行流程源码，husky、lint-staged等内容的介绍和实现原理分析。想不彻底掌握vue-cli脚手架都难。...
视频：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命令源码分析