如果你现在的构建流程还停留在“能跑就行”——改一行代码等十几秒、打包出来的体积自己都不敢看、同事问你 loader 和 plugin 的区别只能回一句“配就完了”，那这门课的缺口就正好对上你了。Webpack5 不是新东西，但它是前端工程化绕不开的一层地基：Vue CLI、Create React App、Next.js 这些脚手架拆开外壳，底下站着的还是它。会配不等于懂，懂才改得动。
先确认自己缺的是哪一块
这门课不适合从没写过配置的人空手进来，也不适合只想背几个配置项的人。你可以先自查三件事：
- 知道
entry、output、module、plugins各自管什么，但说不清它们在一次构建里的先后顺序； - 用过
css-loader、babel-loader，却没想过为什么样式要经过两个 loader、顺序调换会怎样； - 遇到过打包慢、首屏大、缓存失效，只能靠搜到的配置照抄，不知道问题出在构建的哪一环。
以上任意一条中招，说明你缺的不是“再学一个工具”，而是构建过程的因果链。这门课的价值就在于把这条链补上。
课程真正要你动手做的东西
课程主体围绕两条线索走。一条是把 Webpack5 的几条主干拆开讲透：模块解析规则、loader 的职责边界、plugin 介入的时机、devServer 与 HMR 的工作方式、source map 的取舍，以及 Webpack5 相对前几版在持久化缓存、模块联邦这些方向上的变化。另一条线索是落到真实项目上——用 React 搭一个新闻类应用，把资源处理、路由拆分、按需加载这些环节从零跑一遍。框架在这里不是主角，它只是用来证明：同一套构建思路，换成 Vue 也一样成立。
值得留意的是它没有停在“配好能跑”，中间有相当篇幅留给构建优化：怎么定位体积来源、怎么切分公共依赖、怎么让长缓存真正生效、怎么在生产环境和开发环境之间切换策略。这部分才是工作中最常被追问的地方。
配套练习建议这样用
看视频容易产生“我也懂了”的错觉，所以每章之后建议你脱离视频重写一遍配置，哪怕只是最小的入口加输出。几个可以自己加的练习：
- 故意把两个 loader 的顺序写反，观察编译报错，记下原因；
- 给同一个项目分别配出开发和生产两套配置，对比产物体积和构建耗时；
- 把 React 新闻应用里的某个页面改成动态导入，看网络面板里多出来的 chunk；
- 开一次持久化缓存，改一个文件再构建，感受增量到底省在哪。
这些练习不费时间，但能把“看起来会”和“改得动”之间的差距补掉一部分。
看完你应该能回答的问题
判断这门课有没有吃进去，不用看笔记，直接自问：
- 一个
import语句从被解析到进入最终产物，中间经过了哪些环节？ - 为什么有些配置写在 loader 里，有些必须写成 plugin？边界在哪？
- 项目打包变慢时，你会按什么顺序去排查，而不是逐个删配置试？
- 生产环境的缓存策略和开发环境的 HMR，为什么目标其实是冲突的？
这几问能顺畅答出来，构建这块的缺口基本算补上了。答不上来的那一条，就是你要回头重看的地方。
Webpack5入门与实战，前端开发必备技能【完结9章】
Webpack5核心技能，实战提升前端开发效率
编辑点评
深入浅出Webpack5，从基础到实战，涵盖React、Vue等框架应用，提升前端工程化能力。
⭐ 编辑推荐
全面解析Webpack5，实战案例丰富，助你成为高效前端开发者。
课程涵盖：Webpack基础、实战应用、构建优化、工程化能力。
课程亮点
• Webpack5核心技能讲解
• React、Vue实战案例
• 构建优化与工程化能力提升
课程目录
📁 {1}--第1章课程简介
{1}--第1章课程简介文档.png [493.5 KB]
[1.1]--1-1导学.mp4 [45.1 MB]
📁 {7}--第7章react+webpack实战（react版本的新闻应用）
{7}--第7章react+webpack实战（react版本的新闻应用）必看.png [493.5 KB]
[7.6]--7-6实战开发-登录-3.mp4 [93.9 MB]
[7.2]--7-2功能拆分和基础界面设置.mp4 [115.7 MB]
[7.1]--7-1项目基础准备.mp4 [173.6 MB]
[7.8]--7-8实战开发-新闻列表-2.mp4 [104.1 MB]
[7.12]--7-12使用pwa优化当前应用.mp4 [130.8 MB]
[7.3]--7-3服务端功能设计.mp4 [85.6 MB]
[7.9]--7-9实战开发-详情页.mp4 [92.9 MB]
[7.5]--7-5实战开发-登录-2.mp4 [110.8 MB]
[7.11]--7-11浅谈前端性能优化.mp4 [93.6 MB]
[7.7]--7-7实战开发-新闻列表-1.mp4 [86.0 MB]
[7.4]--7-4实战开发-登录-1.mp4 [113.1 MB]
[7.10]--7-10实战开发-详情页.mp4 [92.6 MB]
📁 {3}--第3章学会webpack基础用法，一次搞懂webpack的构建流
{3}--第3章学会webpack基础用法，一次搞懂webpack的构建流说明.zip [1.8 MB]
[3.2]--3-2项目入口-entry.mp4 [81.5 MB]
[3.6]--3-6构建模式-mode.mp4 [72.3 MB]
[3.4]--3-4各类资源处理-loader.mp4 [183.4 MB]
[3.7]--3-7产物源码分析-sourcemap.mp4 [131.7 MB]
[3.5]--3-5让webpack拥有更强大的功能-plugin.mp4 [122.2 MB]
[3.3]--3-3构建产物输出-output.mp4 [71.4 MB]
[3.8]--3-8开发环境模式-devserver.mp4 [130.9 MB]
[3.1]--3-1webpack配置介绍.mp4 [49.4 MB]
📁 {6}--第6章掌握webpack构建效率和产物优化的必杀技
{6}--第6章掌握webpack构建效率和产物优化的必杀技必看.png [493.5 KB]
[6.5]--6-5构建速度优化-使用外链提升构建速度.mp4 [67.4 MB]
[6.8]--6-8构建速度优化-借用swc提升webpack构建速度.mp4 [67.6 MB]
[6.3]--6-3构建速度优化-使用缓存提升二次构建速度.mp4 [139.8 MB]
[6.4]--6-4构建速度优化-另一种缓存方式-MF.mp4 [38.5 MB]
[6.11]--6-11构建产物优化-通过优化图片减少静态资源.mp4 [97.4 MB]
[6.14]--6-14产物优化-使用分包减少主bundle大小-2.mp4 [67.9 MB]
[6.13]--6-13产物优化-使用分包减少主bundle大小-1.mp4 [165.2 MB]
[6.9]--6-9产物优化-构建产物体积分析.mp4 [102.9 MB]
[6.1]--6-1优化准-对webpack构建速度做基本分析.mp4 [114.6 MB]
[6.2]--6-2构建速度优化-利用计算机多核优化构建.mp4 [99.6 MB]
[6.15]--6-15构建产物优化-优化polyfill减少不必要的兼容代码.mp4 [67.8 MB]
[6.10]--6-10构建产物优化-通过代码压缩减小构建产物.mp4 [116.9 MB]
[6.7]--6-7构建速度优化-使用esbuild提升构建速度.mp4 [121.7 MB]
[6.12]--6-12构建产物优化-通过清除无用代码减小构建产物.mp4 [135.0 MB]
[6.6]--6-6构建速度优化-使用更高版本的webpack和node.mp4 [22.6 MB]
📁 {8}--第8章vue+webpack实战（vue版本的新闻应用）
{8}--第8章vue+webpack实战（vue版本的新闻应用）说明.zip [1.8 MB]
[8.2]--8-2项目基础准备-2.mp4 [65.0 MB]
[8.3]--8-3功能拆分和页面设计.mp4 [130.5 MB]
[8.1]--8-1项目基础准备-1.mp4 [98.0 MB]
📁 {2}--第2章走进前端构建
{2}--第2章走进前端构建说明.zip [1.8 MB]
[2.3]--2-3webpack的出现带来的变局.mp4 [24.8 MB]
[2.1]--2-1为什么学习这门课程.mp4 [19.9 MB]
[2.5]--2-5webpack初体验-构建一个最简单的前端项目.mp4 [87.1 MB]
[2.4]--2-4前端构建初体验-webpack及相关工具安装.mp4 [53.8 MB]
[2.2]--2-2了解前端构建的重要性.mp4 [26.2 MB]
📁 {5}--第5章全方位掌握webpack高阶用法
[5.12]--5-12eslint在webpack中如何配置.mp4 [75.3 MB]
[5.7]--5-7tree-shaking的原理和应用.mp4 [121.3 MB]
[5.1]--5-1使用autoprefixer兼容各个浏览器样式属性.mp4 [70.9 MB]
[5.9]--5-9通过webpack构建去除代码中的调试日志.mp4 [48.1 MB]
[5.14]--5-14了解modulefederation.mp4 [121.6 MB]
[5.3]--5-3如何正确的做CodeSpliting.mp4 [91.2 MB]
[5.13]--5-13了解modulefederation.mp4 [62.1 MB]
[5.8]--5-8自动清理前一次构建产物.mp4 [37.8 MB]
[5.5]--5-5将资源内联到html中.mp4 [141.9 MB]
[5.10]--5-10构建SSR应用-1.mp4 [108.6 MB]
[5.4]--5-4公共静态资源处理.mp4 [96.7 MB]
[5.6]--5-6如何实现多页面应用打包.mp4 [146.6 MB]
[5.11]--5-11构建SSR应用-2.mp4 [65.6 MB]
📁 {9}--第9章工程化能力
[9.4]--9-4实现一个简单的脚手架.mp4 [135.2 MB]
[9.3]--9-3编写可扩展的webpack配置.mp4 [76.5 MB]
[9.1]--9-1如何开发发布一个npm包.mp4 [120.0 MB]
[9.2]--9-2编写可扩展的webpack配置.mp4 [81.9 MB]
📁 {4}--第4章了解webpack打包原理，对构建的理解更上一层楼
[4.3]--4-3webpack运行分析之tapable.mp4 [227.4 MB]
[4.7]--4-7plugin的执行过程.mp4 [94.0 MB]
[4.5]--4-5loader的执行过程.mp4 [122.2 MB]
[4.6]--4-6实操-如何实现一个loader.mp4 [99.1 MB]
[4.8]--4-8如何实现一个plugin.mp4 [147.2 MB]
[4.1]--4-1webpack打包文件分析.mp4 [193.4 MB]
[4.4]--4-4webpack运行分析之运行时-compiler.mp4 [133.8 MB]
[4.2]--4-2webpack运行分析之启动流程.mp4 [145.4 MB]
课件.zip [107.1 MB]适合人群
- 前端开发者
- Webpack初学者
- 希望提升工程化能力的开发者
学习收获
掌握Webpack5基础与高级用法
学会Webpack在React、Vue等框架中的应用
提升前端工程化能力
祝您学习愉快！
学有所成，前程似锦！
课程目录
第1章 课程简介 第2章 走进前端构建 第3章 学会webpack基础用法，一次搞懂webpack的构建流程 第4章 了解webpack打包原理，对构建的理解更上一层楼 第5章 全方位掌握 webpack 高阶用法 第6章 掌握webpack构建效率和产物优化的必杀技 第7章 react+webpack实战（react版本的新闻应用） 第8章 vue+webpack实战（vue版本的新闻应用） 第9章 工程化能力
