Webpack 是前端工程化里绕不开的一块，但也是很多人一直没真正搞明白的一块。会用脚手架的人不少，能把构建配置讲清楚的人不多。这门《Webpack5入门与实战》就是冲着这个断层来的——不是教你怎么敲几个命令行，而是让你在面对构建报错、打包体积失控、开发环境卡顿这些具体问题时，知道从哪儿下手。
它解决的是哪些具体场景
如果你目前的工作状态是：项目跑起来了但不敢动配置；换了个脚手架版本就报错；生产包体积大得离谱但找不到原因；公司让你优化构建速度，你只能百度一些零散参数。那这门课的内容是对症的。
它讲的是 Webpack5 这一代的核心机制，包括模块解析、Loader 与 Plugin 的区别与协作、代码分割、Tree Shaking、缓存策略、开发服务器配置等。这些不是概念罗列，而是你改配置时真正会碰到的环节。课程里有相当比例的内容放在「为什么这么配」上，而不是「复制这段配置就行」。这一点对长期做前端的人比较重要，因为构建工具的版本会变，但机制的理解可以迁移。
学完之后能独立做什么
按课程实战部分的设计，跟完能具备独立从零搭一套构建流程的能力，而不是只会改现成的脚手架。具体一点说：能自己配一个支持 TypeScript、样式处理、静态资源加载、热更新的开发环境；能针对生产环境做拆包、压缩、缓存控制；能看懂构建产物的体积报告，并判断哪里该优化。
课程后半段有一个 React 新闻应用的实战，从功能拆分、界面搭建到登录模块逐步推进。这个实战的价值在于：它把 Webpack 的配置放在一个真实项目里反复调整，而不是单独拿一个 demo 讲配置项。你能看到构建配置怎么随着业务需求变化，比如按路由拆包、按环境区分变量，这些在面试和实际工作里都是高频问题。
资料适合什么基础的人
适合已经会写 React 或 Vue、用过至少一个脚手架、但对构建层没有系统认知的前端。如果你完全没写过组件、没接触过 npm 脚本，直接看会比较吃力，建议先补上前端基础再回来。
需要说明的是，课程里涉及 React 实战部分，如果你平时用 Vue，构建配置的通用逻辑仍然适用，但实战章节的代码细节需要自己做一些转换。这不是问题，只是选课前要清楚。
这份资料怎么用比较有效
- 不要跳着看基础章节。Webpack 的坑大多出在 Loader 和 Plugin 的执行顺序、模块解析规则这些地方，基础不牢后面实战会卡住。
- 每看完一个配置点，回到自己的项目里改一处试试。哪怕只是加一个 alias 或调整一下 splitChunks，动手过一次比看十遍有用。
- 实战章节建议跟着敲，不要只看。构建工具的很多报错信息只有自己遇到了才知道怎么读。
- 看完后拿一个自己手头的老项目，试着从脚手架配置迁移到自己的配置，这是检验掌握程度最直接的方式。
整体来说，这门课适合那些「用过但没懂」的开发者。它不是速成课，也不承诺学完就能拿高薪，但它能补上前端工程化里比较关键的一块短板。如果你正在准备面试里关于构建工具的提问，或者工作中确实被构建问题反复消耗时间，值得花时间跟一遍。
课程目录
📁 {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基础用法 学会Webpack5实战应用 提升前端工程化能力 祝您学习愉快！ 学有所成，前程似锦！
