前端工程化是区分“切图仔”与“专业前端”的分水岭。很多开发者停留在手写标签和简单逻辑的层面，一旦进入团队开发或维护中大型项目，就会立刻暴露出构建配置混乱、代码质量不可控、协作效率低下的问题。这套课程的核心价值在于通过大厂级的实战项目，系统梳理从脚手架搭建、模块化构建到性能优化的完整链路，解决你在实际工作中“知其然不知其所以然”的困境。它不追求前沿热点的堆砌，而是聚焦于主流技术栈在真实业务场景中的落地逻辑，帮助你看透黑盒背后的工程原理。

这门课适合具备扎实 JavaScript 基础、熟悉 Vue 或 React 基本用法，但缺乏完整项目全流程经验的中初级开发者。如果你是刚转行入行，或者长期在小型外包项目中单打独斗，对 CI/CD、微前端或模块化打包机制感到陌生，这门课能提供必要的视野拓展。不建议零基础初学者直接入门，因为课程默认你已掌握语言特性与框架基本语法，重点在于工程层面的权衡与设计。若你对当前使用的技术栈有明确了解，建议先回顾相关官方文档中关于构建原理的部分，再进入课程学习，以避免因概念断层导致理解困难。

建议的学习路径并非线性刷完所有视频，而是以“构建”与“测试”为两个核心锚点。首先重点研读 Webpack 与 Vite 的配置差异及其在团队中的适用场景，理解为什么大厂在重构时往往选择渐进式升级而非推倒重来。接着深入模块规范（CommonJS/ESM）与打包原理，这是解决依赖冲突与包体积问题的关键。最后结合实战案例，模拟一次真实的重构过程：从代码规范落地、单元测试覆盖到自动化部署脚本编写。学完并配合练习后，你将能够独立主导中小规模项目的工程化改造，具备排查构建报错、优化首屏加载速度、配置 CI 流水线以及设计可维护的代码架构的能力。

资料的使用应当遵循“以战带练”的逻辑，切勿将其视为单纯的代码仓库下载收藏。每看完一个理论模块，务必在本地环境中复现对应的案例，尝试修改配置参数并观察构建产物的变化，比如改变 chunk 拆分策略后对打包文件的影响。将课程中的实战项目视为一个“练习场”，而非终点，建议你结合自己当前的工作项目或 GitHub 上的开源项目，提取其中一个功能模块进行工程化升级。例如，尝试为旧代码引入 TypeScript 类型检查，或替换原有的构建工具并记录性能对比数据。这种带着问题去对照资料、在真实场景中验证理论的循环，才是将视频知识转化为个人生产力的关键。切记，工程化能力只能在不断解决报错与权衡取舍中习得，单纯的观看无法替代动手构建的肌肉记忆。

mksz548-体系课-吃透前端工程化，大厂级实战项目以战带练 更新中[完结]

本课程隶属 会员库 · MK实战课（一部分是老课） / 课程盒子5-mksz500至599，完整课程目录与配套资料如下。

课程目录

第10章 【Vue3框架升级】大型前端项目Vue2升级Vue3实战/
10-1 为什么要升级vue3——vue3与vue2对比.mp4
10-2 vue3升级流程分析+vue3依赖升级.mp4
10-3 vue2-elm项目启动脚本升级.mp4
10-4 项目vue3升级后编译错误的解决.mp4
10-5 vue-router和vuex语法升级.mp4
10-6 接口升级+图片链接升级.mp4
10-7 首页vue3语法升级.mp4
10-8 vuex和vue-router移植要点解析.mp4
10-9 vue3.2 setup语法糖升级.mp4
第11章 【Webpack性能优化】大型前端项目工程化升级实战/
11-1 webpack性能优化原理和目标[16].mp4
11-2 深入分析构建速度测量插件speed-measure-webpack-plugin[16].mp4
11-3 深入分析构建体积检测插件webpack-bundle-analyzer[16].mp4
11-4 构建性能优化之多进程thread-loader[16].mp4
11-5 【精华】webpack5分包策略详解[16].mp4
11-6 分包文件拷贝和模板的自动引用[16].mp4
11-7 利用webpack5 cache特性大幅提升构建性能[16].mp4
11-8 image-webpack-loader实现图片5倍压缩[16].mp4
11-9 purgecss-webpack-plugin优化css体积[16].mp4
第12章 【Webpack5】前端构建工具Webpack5升级指南/
12-1 webpack4和5构建结果对比[16].mp4
12-2 webpack4和5缓存特性对比[16].mp4
12-3 webpack缓存插件hard-source-webpack-plugin[16].mp4
12-4 webpack4和5构建结果对比[16].mp4
12-5 webpack5高级特性：URIs解析[16].mp4
12-6 webpack5高级特性：TreeShaking和SideEffects[16].mp4
12-7 webpack5高级特性：模块联邦[16].mp4
12-8 webpack5高级特性：PackageExports[16].mp4
第13章 【通关】前端工程化脚手架设计/
13-1 为什么需要前端工程化脚手架？[16].mp4
13-10 应用fs.Stat的mode属性获取文件类型[16].mp4
13-11 使用与运算（&）获取文件权限[16].mp4
13-12 应用id命令获取用户信息[16].mp4
13-13 文件容量和创建时间的获取[16].mp4
13-14 文件夹下级文件数量功能开发[16].mp4
13-15 脚手架自动化测试流程讲解和脚本开发[16].mp4
13-16 文件类型+权限自动化测试脚本开发[16].mp4
13-2 深入脚手架的实现原理[16].mp4
13-3 脚手架开发流程介绍[16].mp4
13-4 快速搭建脚手架和脚手架本地调试方法[16].mp4
13-5 脚手架参数解析方法封装1[16].mp4
13-6 imooc-ls脚手架遍历文件功能实现[16].mp4
13-7 imooc-ls支持查询全部文件和列表渲染模式[16].mp4
13-8 深入讲解MacOS（含Linux）文件权限体系[16].mp4
13-9 解析MacOS（含Linux）文件类型和权限存储原理[16].mp4
第14章 【脚手架框架】前端工程化脚手架框架搭建/
14-1 为什么要使用脚手架框架？[16].mp4
14-10 Command基本用法解析[16].mp4
14-11 Argument高级用法解析[16].mp4
14-12 Commander action this用法+钩子函数[16].mp4
14-13 脚手架框架搭建之Node版本校验[16].mp4
14-14 脚手架框架搭建之命令注册[16].mp4
14-2 脚手架框架之框架搭建+参数解析1[16].mp4
14-3 脚手架框架之subcommand解析[16].mp4
14-4 commander框架帮助文档生成规则[16].mp4
14-5 commander options基础特性解析[16].mp4
14-6 commander options高级特性解析[16].mp4
14-7 高能：利用Option对象创建脚手架属性[16].mp4
14-8 自定义Option处理函数[16].mp4
14-9 高级特性：Option参数叠加处理1[16].mp4
第15章【脚手架build模块】工程化脚手架build模块开发/
[15.10][]15-10命令行交互实现方案inquirer详解[16].mp4
[15.11][]15-11实现配置文件修改后服务自动重启[16].mp4
[15.1][]15-1Node文件监听chokidar库详解[16].mp4
[15.3][]15-3通过chokidar实现config配置文件监听[16].mp4
[15.4][]15-4划重点：Node启动子进程方法之execFile+exe[16].mp4
[15.5][]15-5划重点：Node启动子进程方法之spawn+fork[16].mp4
[15.6][]15-6子进程运行脚本获取默认端口号[16].mp4
[15.7][]15-7Node实现端口号是否被占用功能校验[16].mp4
[15.8][]15-8detect-port库源码分析[16].mp4
[15.9][]15-9Node内置库net详解[16].mp4
第16章【脚手架build模块】工程化脚手架dev模块开发icl/
[16.10][]16-10实现自定义hooks的触发逻辑[16].mp4
[16.11][]16-11高级特性：json配置支持function传入[16].mp4
[16.12][]16-12模块加载问题修复和模块加载原理解析[16].mp4
[16.13][]16-13插件注册逻辑开发[16].mp4
[16.14][]16-14高级特性：webpack-chain详细讲解[16].mp4
[16.15][]16-15webpack-chain支持loader和plugi[16].mp4
[16.16][]16-16插件运行功能开发[16].mp4
[16.17][]16-17imooc-build插件实现webpack配置修改[16].mp4
[16.18][]16-18插件间状态共享+自定义hook功能实现[16].mp4
[16.19][]16-19自定义webpack路径功能支持[16].mp4
[16.1][]16-1脚手架运行流程图绘制[16].mp4
[16.20][]16-20内置插件功能实现[16].mp4
[16.2][]16-2重要：工程化脚手架核心服务架构设计[16].mp4
[16.3][]16-3创建工程化脚手架配套配置文件[16].mp4
[16.5][]16-5fast-glob实现文件遍历功能[16].mp4
[16.6][]16-6多类型配置文件结构解析（解决Node执行ESModue问.mp4
[16.7][]16-7基于npmlog的公共日志类封装[16].mp4
[16.8][]16-8配置文件修改时自动重启服务逻辑优化[16].mp4
[16.9][]16-9高级特性：生命周期函数hooks注册[16].mp4
第17章工程化脚手架：高阶实战——深入工/
[17.10]--17-10文件修改监听+dev和build模式插件分离.mp4
[17.11]--17-11zbest-pc项目工程化脚手架移植.mp4
[17.12]--17-12zbest-pc项目HtmlWebpackPlugin.mp4
[17.13]--17-13vue3项目工程化插件开发.mp4
[17.14]--17-14通用vue插件开发和npm发布.mp4
[17.15]--17-15高级：imooc-build插件集成vue-cli构建.mp4
[17.1]--17-1webpack初始配置mode开发.mp4
[17.2]--17-2entry和output配置移植.mp4
[17.3]--17-3webpackloader配置移植.mp4
[17.4]--17-4webpackplugin配置移植.mp4
[17.5]--17-5webpackoptimization配置移植.mp4
[17.6]--17-6webpack构建逻辑开发.mp4
[17.7]--17-7编译错误和警告逻辑处理+构建时间获取.mp4
[17.8]--17-8工程化脚手架处理html模板.mp4
[17.9]--17-9WebpackDevServerAPI启动服务开发.mp4
第18章工程化脚手架：高阶实战——Bab/
[18.10]--18-10super-tiny-compiler编译器之代码生成.mp4
[18.11]--18-11Babeltypescript预设功能详解.mp4
[18.12]--18-12Babelpreset混合实现tsx编译.mp4
[18.13]--18-13webpack+babel-loader实现模块化+j.mp4
[18.14]--18-14CRA项目初始化+react-scripts启动源码分.mp4
[18.15]--18-15zbestpc项目移植React.mp4
[18.16]--18-16zbestpc项目集成ReactRouter.mp4
[18.17]--18-17react项目集成工程化脚手架.mp4
[18.1]--18-1React项目运行原理解析.mp4
[18.2]--18-2ReactHooks状态管理+组件化.mp4
[18.3]--18-3ReactJSX+Babel开发模式.mp4
[18.4]--18-4ReactBabel生产环境编译.mp4
[18.5]--18-5Babel编译原理解析.mp4
[18.6]--18-6super-tiny-compiler编译器原理分析.mp4
[18.7]--18-7super-tiny-compiler编译器之词法解析.mp4
[18.9]--18-9super-tiny-compiler编译器之AST转换.mp4
第19章抢先实战：零基础——Vite快速/
[19.1]--19-1什么是vite？它为什么能这么快？.mp4
[19.2]--19-2vite从零开发原生js项目.mp4
[19.3]--19-3vite如何打包和发布原生js项目？.mp4
[19.4]--19-4vite支持vue3项目开发.mp4
[19.5]--19-5vite支持react18项目开发.mp4
[19.6]--19-6如何让vite打包代码支持低版本浏览器运行？.mp4
[19.7]--19-7vitevue+react官方项目模板搭建.mp4
[19.8]--19-8破解vite插件机制.mp4
第1章 【序章】关于这门课，你需要了解得都在这里/
1-1 工程化≠webpack.mp4
1-2 【预备知识】优雅学习课程，需要的知识储备_慕课网.pdf
1-3 【增值服务】面试指导_慕课网.pdf
第20章抢先实战：进阶实战——Vite接/
[20.1]--20-1wp2vite移植zbestpc项目工程化配置.mp4
[20.2]--20-2rollup-plugin-inject解决全局变量注入.mp4
[20.3]--20-3模板文件编译和注入.mp4
[20.4]--20-4vite+vue3项目移植.mp4
[20.5]--20-5工程化脚手架build命令开发.mp4
[20.6]--20-6zbestpc项目build命令改造.mp4
[20.7]--20-7工程化脚手架vite插件开发.mp4
第21章加餐：高阶实战——彻底搞懂前端性/
[21.10]--21-10前端性能优化方法总结.mp4
[21.1]--21-1什么是前端性能？.mp4
[21.2]--21-2深入剖析前端性能监控原理（上）.mp4
[21.3]--21-3深入剖析前端性能监控原理（下）.mp4
[21.4]--21-4如何监控前端性能？.mp4
[21.5]--21-5PerformanceEntry解决监控精度和多资源性能.mp4
[21.6]--21-6性能指标核心概念讲解：fp、fcp和lcp.mp4
[21.7]--21-7性能监控和性能度量之PerformanceObserve.mp4
[21.8]--21-8ChromePerformance用法教学.mp4
[21.9]--21-9分享前端性能监控平台架构设计.mp4
第22章加餐：高阶实战——webpack/
[22.10]--22-10模块工厂NormalModuleFactory实例化源.mp4
[22.11]--22-11webpack模块编译对象Compilation实例化.mp4
[22.12]--22-12compilation钩子执行逻辑分析.mp4
[22.13]--22-13webpack模块实例化源码分析.mp4
[22.14]--22-14webpack编译阶段源码分析.mp4
[22.1]--22-1webpack5源码调试方法.mp4
[22.2]--22-2webpack5脚手架源码解析.mp4
[22.3]--22-3webpack-cli初始化流程分析1.mp4
[22.4]--22-4webpack-cli配置构建逻辑分析.mp4
[22.5]--22-5webpackcompiler实例化流程分析.mp4
[22.6]--22-6webpack5配置初始化源码分析.mp4
[22.8]--22-8webpack5编译流程原理分析+核心插件源码分析.mp4
[22.9]--22-9构建前准备阶段源码分析.mp4
第23章加餐：高阶实战——vue-loa/
[23.1]--23-1loader执行流程和pitchloader解析.mp4
[23.2]--23-2vue-loader关键实现——.mp4
[23.3]--23-3vue-loader关键实现——.mp4
[23.4]--23-4VueLoaderPlugin源码解析—&m.mp4
[23.5]--23-5vue-loader核心逻辑——.mp4
[23.6]--23-6vue-loaderpitcher源码分析1.mp4
[23.7]--23-7templateLoader和stylePostLoad.mp4
[23.8]--23-8vue-loader完整执行流程复盘.mp4
第24章加餐：高阶实战——vue-cli/
[24.1]--24-1准备工作——vue-cli5版本.mp4
[24.2]--24-2vue-cli5启动流程源码分析—&mdas.mp4
[24.3]--24-3vue-cli5serve命令执行之init源码分析.mp4
[24.4]--24-4深入vue-cli5插件——了解.mp4
[24.5]--24-5vue-cli5webpack配置解析源码分析.mp4
[24.6]--24-6vue-cli5webpack打包和运行源码分析.mp4
[24.7]--24-7vue-cli5build命令源码分析.mp4
第2章 企业工程化场景分析&工程化核心技术讲解/
2-1 【起航】阶段概览.mp4
2-10 前端工程化关键技术之ESModule规范详解（下）.mp4
2-11 前端工程化关键技术之npm+webpack原理.mp4
2-12 ZBestPC工程化改造需求分析.mp4
2-2 前端工程化发展历史.mp4
2-3 前端工程化的应用场景.mp4
2-4 前端工程化关键技术之模块化详解（上）.mp4
2-5 前端工程化关键技术之模块化详解（中）.mp4
2-6 前端工程化关键技术之模块化详解（下）.mp4
2-7 前端工程化关键技术之CommonJS规范详解（上）.mp4
2-8 前端工程化关键技术之CommonJS规范详解（下）.mp4
2-9 前端工程化关键技术之ESModule规范详解（上）.mp4
第3章 【初探】原生前端项目工程化改造/
3-1 webpack核心概念入门.mp4
3-2 webpack快速入门+基础代码演示.mp4
3-3 webpack source-map原理讲解.mp4
3-4 通过webpack loader打包css文件.mp4
3-5 css-loader打包文件源码解析（上）.mp4
3-6 css-loader打包文件源码解析（下）.mp4
3-7 创建属于自己的文件类型：自定义loader开发.mp4
3-8 webpack plugin入门+BannerPlugin源码解析.mp4
3-9 自定义webpack plugin实现自定义页脚注释.mp4
第4章 【原生js项目】项目源码分析+工程化改造流程分析/
4-1 ZBestPC项目改造前源码分析.mp4
4-2 ZBestPC项目工程化存在的问题分析.mp4
4-3 工程化改造流程梳理和难点解析.mp4
4-4 【储备】项目预备知识梳理_慕课网.pdf
第5章 【前期准备】原生JS项目工程化架构改造/
5-1 原生js项目集成webpack.mp4
5-2 使用html-webpack-plugin实现自动注入bundle.mp4
5-3 首页css移植+webpack5图片打包新特性详解.mp4
5-4 首页js移植+ProvidePlugin注入全局变量.mp4
5-5 zbestpc项目登录页面移植.mp4
第6章 【性能优化】原生JS项目工程化性能优化/
6-1 项目优化进阶之多js分离.mp4
6-2 项目开发模式配置+CopyWebpackPlugin自动拷贝配置.mp4
6-3 性能优化之从bundle剥离css资源.mp4
6-4 性能优化之js&css压缩+treeshaking特性详解.mp4
6-5 精化：详细讲解treeshaking的使用前提和触发条件.mp4
6-6 划重点：详细讲解splitChunkj特性.mp4
6-7 利用ejs实现公共代码复用.mp4
6-8 利用CleanWebpackPlugin清空dist目录.mp4
6-9 【拓展】webpack常用优化手段_慕课网.pdf
第7章 【加餐】原生JS项目Vue进阶改造/
7-1 webpack多配置文件改造.mp4
7-2 完成Vue项目构建前的准备工作.mp4
7-3 编写Vue项目构建配置文件.mp4
7-4 首页和登录页面移植到Vue框架.mp4
7-5 Vue MPA应用移植和工程问题解决.mp4
7-6 Vue2升级Vue3原理讲解+构建脚本升级.mp4
7-7 Vue2升级Vue3源码改造.mp4
7-9 项目任务操作手册_慕课网.pdf
第8章 【进击】大型项目工程化改造/
8-1 vue2-elm架构升级需求分析.mp4
8-2 vue2-elm项目启动+构建命令分析.mp4
8-3 vue2-elm项目开发模式构建源码分析.mp4
8-4 深入理解开发模式下时为什么要启动express服务.mp4
8-5 http服务原理讲解+express服务快速搭建.mp4
8-6 express核心概念middleware深入讲解.mp4
8-7 express异常中间件和异常捕获机制详解.mp4
8-8 express https服务+静态资源服务搭建实战.mp4
第9章 【HMR原理解析】vue-cli核心源码解析/
9-1 核心中间件：webpack-dev-middleware实例化源码解析.mp4
9-2 devMiddleware中间件核心处理逻辑解析.mp4
9-3 深入讲解HMR实现原理.mp4
9-4 hotMiddleware源码执行流程详解.mp4
9-5 HMR客户端实现原理详解.mp4
9-6 vue-cli构建源码流程梳理.mp4
课件.zip