为什么前端构建这块总是卡壳？
很多同学在学 Webpack 时，最大的痛点不是概念难懂，而是遇到报错无从下手。明明代码逻辑没问题，打包就挂了；或者配置写了一堆，不知道哪一行起了作用，哪一行是摆设。这门课专门针对这种“知其然不知其所以然”的状态。它没有一上来就堆砌复杂的高级特性，而是先把你带回原点，把 Webpack 的五个核心概念（Entry、Output、Loader、Plugin、Mode）掰开揉碎讲清楚。很多教材把这四个词列个清单就结束了，但这门课会告诉你，它们在实际项目中是怎么流动的、怎么交互的。如果你经常觉得自己的 webpack.config.js 像天书，或者每次换台机器就要重新摸索一遍环境，那说明你的基础认知是有缺口的，需要从这一块补起来。课程怎么带你把坑都踩过一遍？
课程的结构是按照“资源类型”来推进的，非常符合实际开发中遇到的场景顺序。建议你先看前四节，把初体验跑通，理解命令行和配置文件的基本关系。接下来的重点是 1-5 到 1-8 这几节，分别讲解样式、HTML、图片和其他资源的打包。这里有个关键细节：很多初学者以为 Loader 只是处理 CSS 或 JS 的，但其实图片、字体甚至模板文件都需要特定的 Loader。课程里会演示如何用 url-loader 或 file-loader 处理图片，用 html-webpack-plugin 自动生成 HTML 入口文件。这些看似琐碎的配置，正是日常开发中最容易踩坑的地方。比如，为什么有时候图片路径不对？为什么 CSS 里的背景图引用失效？通过这几节的专项练习，你能建立起对资源处理流程的完整感知。 另外，开发环境的配置（1-9、1-10）是提升效率的关键。devServer 的热更新怎么用？Source Map 怎么配才不影响性能又不丢失调试信息？这些内容在面试和实际工作中都是高频考点。建议你别只看视频，一定要跟着敲一遍配置，特别是 Plugin 的用法，因为 Plugin 的功能远比 Loader 广泛，涉及到代码压缩、环境变量注入等多个维度。学完能独立搞定什么？
完成这门课后，你应该能够独立从零搭建一个基于 Webpack 的前端项目脚手架。具体来说，你能熟练配置处理各种静态资源（CSS、JS、图片、字体），能利用 devServer 进行高效的本地开发，并且懂得如何区分开发环境和生产环境的配置策略。更重要的是，当你在后续学习 Vue CLI 或 Create React App 这些封装好的工具时，你不会因为看不懂内部的 Webpack 配置而感到困惑，因为你已经理解了它们的底层逻辑。这不是为了让你去手写一套复杂的工程化系统，而是让你在面对构建问题时，拥有排查和解决的基础能力。配合课程中的实战练习，多尝试修改配置并观察构建结果的变化，这样学到的东西才是你自己的。课程目录
1-1 [webpack基础与提升] 课程介绍 (04:13) 1-2 [webpack基础与提升] webpack简介 (12:54) 1-3 [webpack基础与提升] webpack五个核心概念 (06:46) 1-4 [webpack基础与提升] webpack的初体验 (15:19) 1-5 [webpack基础与提升] 打包样式资源 (27:14) 1-6 [webpack基础与提升] 打包html资源 (08:52) 1-7 [webpack基础与提升] 打包图片资源 (24:25) 1-8 [webpack基础与提升] 打包其他资源 (12:16) 1-9 [webpack基础与提升] devServer (11:04) 1-10 [webpack基础与提升] 开发环境基本配置 (22:44) 1-11 [webpack基础与提升] 构建环境介绍 (04:07) 1-12 [webpack基础与提升] 提取css成单独文件 (11:08) 1-13 [webpack基础与提升] css兼容性处理 (10:48) 1-14 [webpack基础与提升] 压缩css (04:33) 1-15 [webpack基础与提升] js语法检查eslint (16:49) 1-16 [webpack基础与提升] js兼容性处理eslint (18:57) 1-17 [webpack基础与提升] 压缩html和js (04:26) 1-18 [webpack基础与提升] 生产环境基本配置 (23:43) 1-19 [webpack基础与提升] 性能优化介绍 (04:39) 1-20 [webpack基础与提升] HMR (19:14) 1-21 [webpack基础与提升] source-map (26:07) 1-22 [webpack基础与提升] oneOf (04:02) 1-23 [webpack基础与提升] 缓存 (22:05) 1-24 [webpack基础与提升] tree shaking (09:16) 1-25 [webpack基础与提升] code split (24:09) 1-26 [webpack基础与提升] 懒加载和预加载 (12:34) 1-27 [webpack基础与提升] PWA (15:49) 1-28 [webpack基础与提升] 多进程打包 (06:56) 1-29 [webpack基础与提升] externals (05:16) 1-30 [webpack基础与提升] dll (17:38) 1-31 [webpack基础与提升] 性能优化总结 (28:13) 1-32 [webpack基础与提升] webpack配置详解介绍 (05:06) 1-33 [webpack基础与提升] webpack详细配置之entry (15:38) 1-34 [webpack基础与提升] webpack详细配置之output (12:08) 1-35 [webpack基础与提升] webpack详细配置之module (04:52) 1-36 [webpack基础与提升] webpack详细配置之resolve (09:01) 1-37 [webpack基础与提升] webpack详细配置之devServer (10:36) 1-38 [webpack基础与提升] webpack详细配置之optimization (23:50) 1-39 [webpack基础与提升] webpack5介绍和使用 (20:19) 1-40 [webpack基础与提升] 总结webpack (28:45)
