这门课解决什么痛点

很多前端开发者在接手中大型项目时，面对复杂的工程配置往往手足无措。Webpack 作为前端构建的事实标准，其核心逻辑并不复杂，但配置文件中的 Loader、Plugin、Mode 等概念容易混淆。这门课不讲虚的，直接切入 Webpack 5 的核心，帮你理清“代码如何变成可运行文件”这一本质问题，解决从零搭建构建环境到排查打包错误的实际工作场景。

适合谁学、先看哪几块

**适合基础**：已掌握 HTML/CSS/JavaScript 基础语法，对前端生态有基本认知，但从未系统接触过模块化打包工具的同学。转行前端或初级工程师尤为合适。

**学习路径建议**：
1. **优先看第 3 章**：这是实战核心。重点搞定 Entry（入口）、Output（出口）、Loader（资源处理）和 Plugin（功能扩展）。这是日常开发最常接触的部分，务必动手配通一个简单的 Demo。
2. **接着看第 4 章**：深入 Tapable、Compiler 等底层原理。这部分较抽象，建议在第 3 章能独立配置后回看，理解“为什么这么配”。
3. **第 2 章**可作为背景了解，快速过一遍构建重要性即可，不必深究历史演变。

学完能做什么、资料怎么用

学完后，你将具备独立配置 Webpack 5 项目的能力，包括处理 ES6+ 语法转换、压缩代码、源码映射调试及开发服务器热更新。面对公司现有的构建配置，你能读懂并修改关键参数，而非只会报错求助。

**资料配合练习**：课程配套的示例项目是最佳练习场。不要只看不练，每看完一节，务必在本地复现该节演示的构建流程。例如，学完 Loader 节后，自己配置一个处理 CSS 或图片的 Loader，观察打包产物的变化。通过“配置-报错-排查-修正”的循环，才能将知识内化为工程能力。

课程目录

课程目录71 集
  • {1}--第1章课程简介
  • [1.1]--1-1导学.mp4 45.06M
  • {2}--第2章走进前端构建
  • [2.1]--2-1为什么学习这门课程.mp4 19.95M
  • [2.2]--2-2了解前端构建的重要性.mp4 26.25M
  • [2.3]--2-3webpack的出现带来的变局.mp4 24.76M
  • [2.4]--2-4前端构建初体验-webpack及相关工具安装.mp4 53.78M
  • [2.5]--2-5webpack初体验-构建一个最简单的前端项目.mp4 87.06M
  • {3}--第3章学会webpack基础用法，一次搞懂webpack的构建流
  • [3.1]--3-1webpack配置介绍.mp4 49.41M
  • [3.2]--3-2项目入口-entry.mp4 81.50M
  • [3.3]--3-3构建产物输出-output.mp4 71.39M
  • [3.4]--3-4各类资源处理-loader.mp4 183.35M
  • [3.5]--3-5让webpack拥有更强大的功能-plugin.mp4 122.21M
  • [3.6]--3-6构建模式-mode.mp4 72.31M
  • [3.7]--3-7产物源码分析-sourcemap.mp4 131.67M
  • [3.8]--3-8开发环境模式-devserver.mp4 130.90M
  • {4}--第4章了解webpack打包原理，对构建的理解更上一层楼
  • [4.1]--4-1webpack打包文件分析.mp4 193.44M
  • [4.2]--4-2webpack运行分析之启动流程.mp4 145.43M
  • [4.3]--4-3webpack运行分析之tapable.mp4 227.41M
  • [4.4]--4-4webpack运行分析之运行时-compiler.mp4 133.79M
  • [4.5]--4-5loader的执行过程.mp4 122.21M
  • [4.6]--4-6实操-如何实现一个loader.mp4 99.12M
  • [4.7]--4-7plugin的执行过程.mp4 93.95M
  • [4.8]--4-8如何实现一个plugin.mp4 147.15M
  • {5}--第5章全方位掌握webpack高阶用法
  • [5.10]--5-10构建SSR应用-1.mp4 108.63M
  • [5.11]--5-11构建SSR应用-2.mp4 65.63M
  • [5.12]--5-12eslint在webpack中如何配置.mp4 75.29M
  • [5.13]--5-13了解modulefederation.mp4 62.07M
  • [5.14]--5-14了解modulefederation.mp4 121.56M
  • [5.1]--5-1使用autoprefixer兼容各个浏览器样式属性.mp4 70.88M
  • [5.3]--5-3如何正确的做CodeSpliting.mp4 91.21M
  • [5.4]--5-4公共静态资源处理.mp4 96.66M
  • [5.5]--5-5将资源内联到html中.mp4 141.94M
  • [5.6]--5-6如何实现多页面应用打包.mp4 146.64M
  • [5.7]--5-7tree-shaking的原理和应用.mp4 121.30M
  • [5.8]--5-8自动清理前一次构建产物.mp4 37.82M
  • [5.9]--5-9通过webpack构建去除代码中的调试日志.mp4 48.11M
  • {6}--第6章掌握webpack构建效率和产物优化的必杀技
  • [6.10]--6-10构建产物优化-通过代码压缩减小构建产物.mp4 116.88M
  • [6.11]--6-11构建产物优化-通过优化图片减少静态资源.mp4 97.38M
  • [6.12]--6-12构建产物优化-通过清除无用代码减小构建产物.mp4 135.01M
  • [6.13]--6-13产物优化-使用分包减少主bundle大小-1.mp4 165.19M
  • [6.14]--6-14产物优化-使用分包减少主bundle大小-2.mp4 67.87M
  • [6.15]--6-15构建产物优化-优化polyfill减少不必要的兼容代码.mp4 67.76M
  • [6.1]--6-1优化准-对webpack构建速度做基本分析.mp4 114.64M
  • [6.2]--6-2构建速度优化-利用计算机多核优化构建.mp4 99.61M
  • [6.3]--6-3构建速度优化-使用缓存提升二次构建速度.mp4 139.82M
  • [6.4]--6-4构建速度优化-另一种缓存方式-MF.mp4 38.53M
  • [6.5]--6-5构建速度优化-使用外链提升构建速度.mp4 67.38M
  • [6.6]--6-6构建速度优化-使用更高版本的webpack和node.mp4 22.61M
  • [6.7]--6-7构建速度优化-使用esbuild提升构建速度.mp4 121.72M
  • [6.8]--6-8构建速度优化-借用swc提升webpack构建速度.mp4 67.57M
  • [6.9]--6-9产物优化-构建产物体积分析.mp4 102.86M
  • {7}--第7章react+webpack实战（react版本的新闻应用）
  • [7.10]--7-10实战开发-详情页.mp4 92.64M
  • [7.11]--7-11浅谈前端性能优化.mp4 93.65M
  • [7.12]--7-12使用pwa优化当前应用.mp4 130.76M
  • [7.1]--7-1项目基础准备.mp4 173.59M
  • [7.2]--7-2功能拆分和基础界面设置.mp4 115.71M
  • [7.3]--7-3服务端功能设计.mp4 85.58M
  • [7.4]--7-4实战开发-登录-1.mp4 113.11M
  • [7.5]--7-5实战开发-登录-2.mp4 110.81M
  • [7.6]--7-6实战开发-登录-3.mp4 93.87M
  • [7.7]--7-7实战开发-新闻列表-1.mp4 86.03M
  • [7.8]--7-8实战开发-新闻列表-2.mp4 104.14M
  • [7.9]--7-9实战开发-详情页.mp4 92.91M
  • {8}--第8章vue+webpack实战（vue版本的新闻应用）
  • [8.1]--8-1项目基础准备-1.mp4 98.02M
  • [8.2]--8-2项目基础准备-2.mp4 65.04M
  • [8.3]--8-3功能拆分和页面设计.mp4 130.51M
  • {9}--第9章工程化能力
  • [9.1]--9-1如何开发发布一个npm包.mp4 119.99M
  • [9.2]--9-2编写可扩展的webpack配置.mp4 81.92M
  • [9.3]--9-3编写可扩展的webpack配置.mp4 76.55M
  • [9.4]--9-4实现一个简单的脚手架.mp4 135.25M
  • 课件
  • code-master.zip 4.29M
  • course-wiki-master.zip 14.87M
  • Webpack5入门与实战，前端开发必备技能【完结9章】/