这门课解决什么实际工作场景？

前端工程化的核心痛点，往往不是写不出业务代码，而是搞不定项目构建。在实际工作中，你可能面对一堆 .js、.css、图片资源，不知该如何打包、压缩、处理兼容性，也不知道如何配置开发服务器实现热更新。对于初级或转行开发者，Webpack 是绕不开的技术门槛；即便有一定经验，面对 Webpack 5 的新特性（如持久化缓存、Tree Shaking 改进等）以及构建性能优化时，也常感到无从下手。

这门课程聚焦于「从配置到原理再到实战」的完整闭环。它不只教你安装几个 Loader，而是帮你建立工程化思维：理解模块依赖是如何被解析的，资源是如何被转换的，最终又是如何打包输出的。这对于需要独立负责项目搭建、或希望深入理解前端构建工具链的开发人员来说，是解决「构建黑盒」问题的有效途径。

适合什么基础？建议先看哪几块？

课程定位为基础入门与实战结合，适合具备 HTML/CSS/JavaScript 基础，但尚未系统学习过前端工程化构建工具的学员。如果你从未接触过 npm 包管理或模块化开发（CommonJS/ES Module），建议先补齐前置知识，否则在理解 Loader 和 Plugin 的工作机制时会较为吃力。

学习路径建议如下：首先从「基础使用」模块入手，掌握 Webpack 5 的核心概念（Entry、Output、Loader、Plugin）及最简单的配置，确保能跑通一个 Hello World 级别的打包流程。接着进入「原理分析」部分，这是区分「会用」和「懂用」的关键，重点理解模块解析、编译构建的过程。随后是「构建优化」章节，学习如何配置持久缓存、代码分割及性能调优，这是提升大型项目开发效率的核心。最后通过「实战项目」将上述技能串联，独立完成一个完整的前端项目构建方案。

学完能独立做什么？资料如何配合练习？

完成本课程后，你将能够独立从零搭建基于 Webpack 5 的前端项目工程化环境。具体包括：熟练配置各类 Loader 处理 JS、CSS、图片、字体等资源；编写或调整常用 Plugin 满足自动化任务需求；理解构建原理并能针对构建速度、产物体积进行基础优化；以及具备排查构建错误、调试复杂配置的能力。

资料包中包含了完整的视频讲解与配套项目文件。建议采用「先看原理，再动手配置」的方式配合练习。不要只看不练，务必跟随视频一步步配置出对应的构建结果，并在实战项目环节尝试脱离视频，独立修改配置以实现特定功能（如开启生产模式压缩、配置 CDN 路径等）。只有亲手处理过配置报错和资源加载失败的问题，这些知识才能真正转化为你的职场技能。

课程目录

├── 第1章 课程简介/ │ └── [ 47M] 1-1 导学.mp4
 ├── 第2章 走进前端构建/ │ ├── [ 12M] 2-1 为什么学习这门课程.mp4
 │ ├── [ 24M] 2-2 了解前端构建的重要性.mp4
 │ ├── [ 13M] 2-3 webpack的出现带来的变局.mp4
 │ ├── [ 76M] 2-4 前端构建初体验- webpack 及相关工具安装.mp4
 │ └── [115M] 2-5 webpack初体验-构建一个最简单的前端项目.mp4
 └── 第3章 学会webpack基础用法，一次搞懂webpack的构建流程/ ├── [ 39M] 3-1 webpack 配置介绍.mp4
 ├── [186M] 3-2 项目入口 – entry.mp4
 ├── [140M] 3-3 构建产物输出 – output.mp4
 ├── [238M] 3-4 各类资源处理-loader.mp4
 ├── [218M] 3-5 让 webpack 拥有更强大的功能-plugin.mp4
 ├── [ 91M] 3-6 构建模式-mode.mp4
 ├── [170M] 3-7 产物源码分析-sourcemap.mp4
 └── [283M] 3-8 开发环境模式-devserver.mp4
 ├── 第4章了解webpack打包原理，对构建的理解更上一层楼/ │ ├── [184M] 4-1webpack打包文件分析.mp4
 │ ├── [134M] 4-2webpack运行分析之启动流程.mp4
 │ ├── [217M] 4-3webpack运行分析之tapable.mp4
 │ ├── [129M] 4-4webpack运行分析之运行时-compiler.mp4
 │ ├── [110M] 4-5loader的执行过程.mp4
 │ ├── [ 91M] 4-6实操-如何实现一个loader.mp4
 │ ├── [ 89M] 4-7plugin的执行过程.mp4
 │ └── [135M] 4-8如何实现一个plugin.mp4
 ├── 第5章全方位掌握webpack高阶用法/ │ ├── [ 98M] 5-10构建SSR应用-1.mp4
 │ ├── [ 80M] 5-11构建SSR应用-2.mp4
 │ ├── [ 68M] 5-12eslint在webpack中如何配置.mp4
 │ ├── [ 55M] 5-13了解modulefederation.mp4
 │ ├── [150M] 5-14了解modulefederation.mp4
 │ ├── [ 68M] 5-1使用autoprefixer兼容各个浏览器样式属性.mp4
 │ ├── [ 87M] 5-3如何正确的做CodeSpliting.mp4
 │ ├── [ 85M] 5-4公共静态资源处理.mp4
 │ ├── [132M] 5-5将资源内联到html中.mp4
 │ ├── [136M] 5-6如何实现多页面应用打包.mp4
 │ ├── [118M] 5-7tree-shaking的原理和应用.mp4
 │ ├── [ 35M] 5-8自动清理前一次构建产物【更多it资源 www.】.mp4
 │ └── [ 43M] 5-9通过webpack构建去除代码中的调试日志.mp4
 ├── 第6章掌握webpack构建效率和产物优化的必杀技/ │ ├── [125M] 6-10构建产物优化-通过代码压缩减小构建产物.mp4
 │ ├── [134M] 6-11构建产物优化-通过优化图片减少静态资源.mp4
 │ ├── [ 98M] 6-12构建产物优化-通过清除无用代码减小构建产物.mp4
 │ ├── [197M] 6-13产物优化-使用分包减少主bundle大小-1.mp4
 │ ├── [103M] 6-14产物优化-使用分包减少主bundle大小-2.mp4
 │ ├── [ 68M] 6-15构建产物优化-优化polyfill减少不必要的兼容代码.mp4
 │ ├── [137M] 6-1优化准-对webpack构建速度做基本分析.mp4
 │ ├── [ 90M] 6-2构建速度优化-利用计算机多核优化构建.mp4
 │ ├── [187M] 6-3构建速度优化-使用缓存提升二次构建速度.mp4
 │ ├── [ 26M] 6-4构建速度优化-另一种缓存方式-MF.mp4
 │ ├── [ 59M] 6-5构建速度优化-使用外链提升构建速度.mp4
 │ ├── [ 19M] 6-6构建速度优化-使用更高版本的webpack和node.mp4
 │ ├── [142M] 6-7构建速度优化-使用esbuild提升构建速度.mp4
 │ ├── [ 56M] 6-8构建速度优化-借用swc提升webpack构建速度.mp4
 │ └── [110M] 6-9产物优化-构建产物体积分析.mp4
 └── 第7章react+webpack实战（react版本的新闻应用）/ ├──@更多it资源 www. ├── [216M] 7-10实战开发-详情页.mp4
 ├── [ 76M] 7-11浅谈前端性能优化.mp4
 ├── [166M] 7-12使用pwa优化当前应用.mp4
 ├── [156M] 7-1项目基础准备.mp4
 ├── [ 64M] 7-2功能拆分和基础界面设置.mp4
 ├── [ 43M] 7-3服务端功能设计.mp4
 ├── [168M] 7-4实战开发-登录-1.mp4
 ├── [161M] 7-5实战开发-登录-2.mp4
 ├── 7-6 实战开发-登录-3.mp4
 ├── [139M] 7-7实战开发-新闻列表-1.mp4
 └── [179M] 7-8实战开发-新闻列表-2.mp4
 └── [159M] 7-9 实战开发-详情页.mp4
 ├── 第8章 vue+webpack实战（vue版本的新闻应用）/ │ ├── [110M] 8-1 项目基础准备-1.mp4
 │ ├── [109M] 8-2 项目基础准备-2.mp4
 │ └── [296M] 8-3 功能拆分和页面设计.mp4
 └── 第9章 工程化能力/ ├── [142M] 9-1 如何开发发布一个npm包.mp4
 ├── [120M] 9-2 编写可扩展的 webpack 配置.mp4
 ├── [191M] 9-3 编写可扩展的 webpack 配置.mp4
 └── [200M] 9-4 实现一个简单的脚手架.mp4