慕课网体系课-吃透前端工程化，大厂级实战项目以战带完结无秘24章

前端开发

课程简介

这门课的主题很明确：前端工程化，而且是以 Webpack 5 为主线、用项目把配置一条条跑通的那种。如果你正在从"会用脚手架"往"能改构建配置、能定位打包性能问题"的方向过渡，它提供的是一份可以对照动手的工程参考，而不是听完就完的讲解。技术栈与主线：Webpack 5 为核心，Vite 作为对照课程把 Webpack 5 放在绝对主线位置，从核心配置讲…

已有 6 人浏览发布 2026-07-10 更新 2026-08-29

这门课的主题很明确：前端工程化，而且是以 Webpack 5 为主线、用项目把配置一条条跑通的那种。如果你正在从"会用脚手架"往"能改构建配置、能定位打包性能问题"的方向过渡，它提供的是一份可以对照动手的工程参考，而不是听完就完的讲解。

技术栈与主线：Webpack 5 为核心，Vite 作为对照

课程把 Webpack 5 放在绝对主线位置，从核心配置讲到升级迁移，再切到性能优化。这一点对实际工作比较有价值——Webpack 5 的持久化缓存、模块联邦、资源模块（asset modules）这些特性，很多团队还停留在"知道有"的阶段，缺少可参考的落地配置。课程把升级指南单独成章，说明它面对的不是全新项目，而是存量项目的迁移场景，这一点比纯入门更贴近真实工程。

后半段引入 Vite 的接入实战，也不是单纯换工具，而是让你看清两种构建思路的差异：一个是以打包为中心的增量优化，一个是基于原生 ESM 的开发期免打包。把两者放在同一门课里对照，比只学其一更容易理解构建工具到底在解决什么问题。

项目结构：以战带练，章节之间是递进关系

课程采用"以战带练"的组织方式，24 章并非各自独立的技巧集合，而是围绕一个大型前端项目的工程化升级逐步展开。典型节奏是：先补齐 Webpack 5 的基础配置与升级要点，再进入性能优化环节，处理构建体积、打包速度、缓存策略这类在真实项目里绕不开的议题，最后延伸到 Vite 的接入方案。

这种结构的好处是，每一章的配置改动都能在同一个项目上下文里验证效果。学习时建议不要跳章，尤其是性能优化部分——它依赖前面已经搭好的构建基线，脱离基线单独看优化手段，很容易变成背配置项。

可复用的部分：哪些能直接搬进自己的项目

Webpack 5 的升级路径：从旧版本迁移时需要改动的配置点、废弃项替换方式，可以对照自己项目的webpack.config.js逐条核对。
构建性能优化手段：缓存配置、多进程/多线程处理、依赖预编译、产物拆分策略，这些是通用能力，换项目也成立。
工程化规范配套：构建与 lint、环境变量、多环境打包的结合方式，属于团队协作层面能直接复用的部分。
Vite 接入方案：对于正在评估是否切换或并存使用 Vite 的团队，这份接入思路可以作为迁移评估的起点。

需要注意的是，课程里的配置往往针对特定业务场景做了取舍。搬到自己的项目时，先确认构建目标（浏览器兼容范围、产物体积要求、部署方式）是否一致，再决定保留哪些优化项。

自学路径建议

比较高效的用法是带着问题看：先在自己的项目里跑一次构建，记录下耗时和产物体积，然后对照课程的相关章节做改造，改完再跑一次对比数据。Webpack 的配置改动如果只看不测，很难建立直觉。

对于已经熟悉 Webpack 4 的开发者，可以重点看升级指南和性能优化两段，基础配置部分快速过一遍即可；如果是刚接触工程化，建议从构建流程的基本概念入手，把 loader、plugin、resolve、output 这几个概念在项目里各找一个实际用例，再去碰优化章节。课程提供的素材和配置可以作为参照系，但真正形成能力的还是自己动手改、动手测的过程。

慕课网体系课-吃透前端工程化，大厂级实战项目以战带价值1680元完结无秘24章

大厂级实战项目，Webpack5核心技能

编辑点评

深度解析Webpack5，实战项目贯穿全程，助力进阶大厂级前端工程师。

⭐ 编辑推荐

全面覆盖Webpack5核心特性，实战项目解析，企业级工程化实战技巧。

✨ 课程亮点

✦Webpack5核心特性解析

✦实战项目驱动学习

✦企业级工程化实战

课程目录

第12章【Webpack5】前端构建工具Webpack5升级指南9 集

第12章【Webpack5】前端构建工具Webpack5升级指南必看.png [493.5 KB]
12-7webpack5高级特性：模块联邦.mp4 [100.5 MB]
12-2webpack4和5缓存特性对比.mp4 [58.8 MB]
12-1webpack4和5构建结果对比.mp4 [72.1 MB]
12-4webpack4和5构建结果对比.mp4 [67.7 MB]
12-8webpack5高级特性：PackageExports.mp4 [35.4 MB]
12-6webpack5高级特性：TreeShaking和SideEffects.mp4 [53.3 MB]
12-3webpack缓存插件hard-source-webpack-plugin.mp4 [24.3 MB]
12-5webpack5高级特性：URIs解析.mp4 [73.4 MB]

第20章抢先实战：进阶实战&mdash&mdashVite接8 集

第20章抢先实战：进阶实战&mdash&mdashVite接资料.zip [1.8 MB]
20-3模板文件编译和注入.mp4 [48.3 MB]
20-1wp2vite移植zbestpc项目工程化配置.mp4 [39.7 MB]
20-6zbestpc项目build命令改造.mp4 [51.5 MB]
20-5工程化脚手架build命令开发.mp4 [87.9 MB]
20-2rollup-plugin-inject解决全局变量注入.mp4 [23.4 MB]
20-4vite+vue3项目移植.mp4 [65.5 MB]
20-7工程化脚手架vite插件开发.mp4 [64.4 MB]

第11章【Webpack性能优化】大型前端项目工程化升级实战10 集

第11章【Webpack性能优化】大型前端项目工程化升级实战必看.png [493.5 KB]
11-3深入分析构建体积检测插件webpack-bundle-analyzer.mp4 [54.8 MB]
11-6分包文件拷贝和模板的自动引用.mp4 [54.1 MB]
11-7利用webpack5cache特性大幅提升构建性能.mp4 [43.5 MB]
11-2深入分析构建速度测量插件speed-measure-webpack-plugin.mp4 [71.9 MB]
11-4构建性能优化之多进程thread-loader.mp4 [53.2 MB]
11-1webpack性能优化原理和目标.mp4 [21.2 MB]
11-9purgecss-webpack-plugin优化css体积.mp4 [32.3 MB]
11-5【精华】webpack5分包策略详解.mp4 [63.5 MB]
11-8image-webpack-loader实现图片5倍压缩.mp4 [39.5 MB]

第21章加餐：高阶实战&mdash&mdash彻底搞懂前端性11 集

第21章加餐：高阶实战&mdash&mdash彻底搞懂前端性文档.zip [1.8 MB]
21-10前端性能优化方法总结.mp4 [66.4 MB]
21-2深入剖析前端性能监控原理（上）.mp4 [82.0 MB]
21-3深入剖析前端性能监控原理（下）.mp4 [83.6 MB]
21-1什么是前端性能？.mp4 [22.5 MB]
21-8ChromePerformance用法教学.mp4 [44.6 MB]
21-9分享前端性能监控平台架构设计.mp4 [21.4 MB]
21-6性能指标核心概念讲解：fp、fcp和lcp.mp4 [50.0 MB]
21-7性能监控和性能度量之PerformanceObserve.mp4 [91.9 MB]
21-4如何监控前端性能？.mp4 [52.5 MB]
21-5PerformanceEntry解决监控精度和多资源性能.mp4 [36.3 MB]

第02章企业工程化场景分析&工程化核心技术讲解13 集

第02章企业工程化场景分析&工程化核心技术讲解必看.zip [1.8 MB]
2-12ZBestPC工程化改造需求分析.mp4 [24.2 MB]
2-10前端工程化关键技术之ESModule规范详解（下）.mp4 [79.8 MB]
2-9前端工程化关键技术之ESModule规范详解（上）.mp4 [59.2 MB]
2-2前端工程化发展历史.mp4 [133.2 MB]
2-4前端工程化关键技术之模块化详解（上）.mp4 [122.2 MB]
2-5前端工程化关键技术之模块化详解（中）.mp4 [58.6 MB]
2-1【起航】阶段概览.mp4 [23.9 MB]
2-7前端工程化关键技术之CommonJS规范详解（上）.mp4 [66.6 MB]
2-11前端工程化关键技术之npm+webpack原理.mp4 [72.5 MB]
2-8前端工程化关键技术之CommonJS规范详解（下）.mp4 [97.7 MB]
2-3前端工程化的应用场景.mp4 [71.1 MB]
2-6前端工程化关键技术之模块化详解（下）.mp4 [39.2 MB]

第03章【初探】原生前端项目工程化改造9 集

3-1webpack核心概念入门.mp4 [27.6 MB]
3-8webpackplugin入门+BannerPlugin源码解析.mp4 [71.1 MB]
3-9自定义webpackplugin实现自定义页脚注释.mp4 [38.8 MB]
3-2webpack快速入门+基础代码演示.mp4 [74.0 MB]
3-6css-loader打包文件源码解析（下）.mp4 [37.7 MB]
3-3webpacksource-map原理讲解.mp4 [26.5 MB]
3-4通过webpackloader打包css文件.mp4 [27.5 MB]
3-5css-loader打包文件源码解析（上）.mp4 [59.4 MB]
3-7创建属于自己的文件类型：自定义loader开发.mp4 [69.6 MB]

第09章【HMR原理解析】vue-cli核心源码解析6 集

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

第18章工程化脚手架：高阶实战&mdash&mdashBab16 集

18-3ReactJSX+Babel开发模式.mp4 [38.9 MB]
18-15zbestpc项目移植React.mp4 [128.7 MB]
18-6super-tiny-compiler编译器原理分析.mp4 [53.6 MB]
18-12Babelpreset混合实现tsx编译.mp4 [72.1 MB]
18-2ReactHooks状态管理+组件化.mp4 [57.1 MB]
18-9super-tiny-compiler编译器之AST转换.mp4 [65.5 MB]
18-10super-tiny-compiler编译器之代码生成.mp4 [27.0 MB]
18-1React项目运行原理解析.mp4 [85.8 MB]
18-4ReactBabel生产环境编译.mp4 [64.3 MB]
18-7super-tiny-compiler编译器之词法解析.mp4 [43.0 MB]
18-5Babel编译原理解析.mp4 [45.9 MB]
18-14CRA项目初始化+react-scripts启动源码分.mp4 [65.0 MB]
18-16zbestpc项目集成ReactRouter.mp4 [55.2 MB]
18-11Babeltypescript预设功能详解.mp4 [96.2 MB]
18-17react项目集成工程化脚手架.mp4 [45.2 MB]
18-13webpack+babel-loader实现模块化+j.mp4 [46.5 MB]

第01章【序章】关于这门课，你需要了解得都在这里3 集

1-1工程化≠webpack.mp4 [12.4 MB]
1-2【预备知识】优雅学习课程，需要的知识储备_慕课网.pdf [165.6 KB]
1-3【增值服务】面试指导_慕课网.pdf [683.9 KB]

第06章【性能优化】原生JS项目工程化性能优化9 集

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

第14章【脚手架框架】前端工程化脚手架框架搭建14 集

14-12Commanderactionthis用法+钩子函数.mp4 [42.9 MB]
14-6commanderoptions高级特性解析.mp4 [63.5 MB]
14-7高能：利用Option对象创建脚手架属性.mp4 [99.7 MB]
14-5commanderoptions基础特性解析.mp4 [77.3 MB]
14-1为什么要使用脚手架框架？.mp4 [31.4 MB]
14-4commander框架帮助文档生成规则.mp4 [21.6 MB]
14-10Command基本用法解析.mp4 [48.6 MB]
14-14脚手架框架搭建之命令注册.mp4 [31.7 MB]
14-2脚手架框架之框架搭建+参数解析1.mp4 [55.2 MB]
14-13脚手架框架搭建之Node版本校验.mp4 [96.7 MB]
14-9高级特性：Option参数叠加处理1.mp4 [45.6 MB]
14-11Argument高级用法解析.mp4 [35.2 MB]
14-3脚手架框架之subcommand解析.mp4 [45.9 MB]
14-8自定义Option处理函数.mp4 [39.7 MB]

第17章工程化脚手架：高阶实战&mdash&mdash深入工15 集

17-9WebpackDevServerAPI启动服务开发.mp4 [67.4 MB]
17-3webpackloader配置移植.mp4 [76.2 MB]
17-7编译错误和警告逻辑处理+构建时间获取.mp4 [54.5 MB]
17-10文件修改监听+dev和build模式插件分离.mp4 [48.0 MB]
17-11zbest-pc项目工程化脚手架移植.mp4 [77.3 MB]
17-14通用vue插件开发和npm发布.mp4 [42.9 MB]
17-13vue3项目工程化插件开发.mp4 [72.9 MB]
17-5webpackoptimization配置移植.mp4 [28.6 MB]
17-6webpack构建逻辑开发.mp4 [63.6 MB]
17-15高级：imooc-build插件集成vue-cli构建.mp4 [91.2 MB]
17-1webpack初始配置mode开发.mp4 [38.5 MB]
17-2entry和output配置移植.mp4 [39.6 MB]
17-12zbest-pc项目HtmlWebpackPlugin.mp4 [42.1 MB]
17-4webpackplugin配置移植.mp4 [69.0 MB]
17-8工程化脚手架处理html模板.mp4 [53.1 MB]

第16章【脚手架build模块】工程化脚手架dev模块开发icl19 集

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

第23章加餐：高阶实战&mdash&mdashvue-loa8 集

23-7templateLoader和stylePostLoad.mp4 [56.1 MB]
23-1loader执行流程和pitchloader解析.mp4 [77.6 MB]
23-5vue-loader核心逻辑&mdash&mdash.mp4 [122.5 MB]
23-8vue-loader完整执行流程复盘.mp4 [45.5 MB]
23-6vue-loaderpitcher源码分析1.mp4 [78.5 MB]
23-2vue-loader关键实现&mdash&mdash.mp4 [78.0 MB]
23-3vue-loader关键实现&mdash&mdash.mp4 [19.9 MB]
23-4VueLoaderPlugin源码解析&mdash&m.mp4 [108.3 MB]

课件3 条

zbestpc_upgrade-master2.zip [14.3 MB]
zbestpc_upgrade-master1.zip [13.2 MB]
imooc-build-master.zip [221.3 KB]

第05章【前期准备】原生JS项目工程化架构改造5 集

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

第24章加餐：高阶实战&mdash&mdashvue-cli7 集

24-7vue-cli5build命令源码分析.mp4 [59.5 MB]
24-1准备工作&mdash&mdashvue-cli5版本.mp4 [33.6 MB]
24-3vue-cli5serve命令执行之init源码分析.mp4 [99.3 MB]
24-5vue-cli5webpack配置解析源码分析.mp4 [99.3 MB]
24-6vue-cli5webpack打包和运行源码分析.mp4 [38.4 MB]
24-2vue-cli5启动流程源码分析&mdash&mdas.mp4 [79.2 MB]
24-4深入vue-cli5插件&mdash&mdash了解.mp4 [57.2 MB]

第13章【通关】前端工程化脚手架设计16 集

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

第19章抢先实战：零基础&mdash&mdashVite快速8 集

19-4vite支持vue3项目开发.mp4 [37.8 MB]
19-1什么是vite？它为什么能这么快？.mp4 [28.4 MB]
19-3vite如何打包和发布原生js项目？.mp4 [33.4 MB]
19-6如何让vite打包代码支持低版本浏览器运行？.mp4 [41.4 MB]
19-2vite从零开发原生js项目.mp4 [50.9 MB]
19-5vite支持react18项目开发.mp4 [73.1 MB]
19-7vitevue+react官方项目模板搭建.mp4 [45.4 MB]
19-8破解vite插件机制.mp4 [28.3 MB]

第22章加餐：高阶实战&mdash&mdashwebpack13 集

22-5webpackcompiler实例化流程分析.mp4 [34.5 MB]
22-6webpack5配置初始化源码分析.mp4 [56.7 MB]
22-8webpack5编译流程原理分析+核心插件源码分析.mp4 [90.2 MB]
22-3webpack-cli初始化流程分析1.mp4 [70.4 MB]
22-4webpack-cli配置构建逻辑分析.mp4 [35.3 MB]
22-2webpack5脚手架源码解析.mp4 [31.3 MB]
22-11webpack模块编译对象Compilation实例化.mp4 [61.4 MB]
22-14webpack编译阶段源码分析.mp4 [65.0 MB]
22-12compilation钩子执行逻辑分析.mp4 [29.8 MB]
22-1webpack5源码调试方法.mp4 [35.7 MB]
22-10模块工厂NormalModuleFactory实例化源.mp4 [50.7 MB]
22-13webpack模块实例化源码分析.mp4 [104.9 MB]
22-9构建前准备阶段源码分析.mp4 [41.3 MB]

第15章【脚手架build模块】工程化脚手架build模块开发10 集

15-5划重点：Node启动子进程方法之spawn+fork.mp4 [69.8 MB]
15-1Node文件监听chokidar库详解.mp4 [57.8 MB]
15-8detect-port库源码分析.mp4 [92.4 MB]
15-4划重点：Node启动子进程方法之execFile+exe.mp4 [66.8 MB]
15-6子进程运行脚本获取默认端口号.mp4 [39.5 MB]
15-3通过chokidar实现config配置文件监听.mp4 [34.4 MB]
15-9Node内置库net详解.mp4 [84.8 MB]
15-7Node实现端口号是否被占用功能校验.mp4 [37.1 MB]
15-11实现配置文件修改后服务自动重启.mp4 [65.0 MB]
15-10命令行交互实现方案inquirer详解.mp4 [82.0 MB]

第10章【Vue3框架升级】大型前端项目Vue2升级Vue3实战(1)9 集

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

第08章【进击】大型项目工程化改造8 集

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

第07章【加餐】原生JS项目Vue进阶改造8 集

第04章【原生js项目】项目源码分析+工程化改造流程分析4 集

4-3工程化改造流程梳理和难点解析.mp4 [33.8 MB]
4-4【储备】项目预备知识梳理_慕课网.pdf [187.1 KB]
4-2ZBestPC项目工程化存在的问题分析.mp4 [24.2 MB]
4-1ZBestPC项目改造前源码分析.mp4 [41.8 MB]

适合人群

前端工程师
进阶开发者
求职者

🎯 学习收获

掌握Webpack5核心技能
提升工程化实战能力
适应大厂级项目需求

🎉 祝您学习愉快！

慕课网体系课-吃透前端工程化，大厂级实战项目以战带 完结无秘24章