**Web 前端工程化的核心利器：深入理解 Webpack 构建原理与实战**

在 Modern Web 开发的浩瀚版图中，随着应用复杂度的指数级上升，传统的“复制粘贴”式开发已难以为继。资源依赖混乱、作用域冲突、加载性能低下等问题如幽灵般困扰着每一位前端开发者。此时，Webpack 作为现代前端工程化领域的事实标准构建工具，便成为了连接代码与用户体验的关键桥梁。本课程《Webpack 学习指南》专为希望系统掌握模块打包技术的前端工程师设计，旨在从根源上解答“为什么要构建”以及“如何高效构建”两大核心命题。

课程伊始，我们将直击痛点，深入剖析 Webpack 诞生的必要性。在原生 JavaScript 早期，缺乏模块化机制导致全局变量污染和作用域泄漏频发，代码维护成本居高不下。Webpack 通过引入模块概念，完美解决了这一难题。然而，浏览器对现代 ES Modules 的支持并非一蹴而就，加之代码体量日益庞大，直接运行原始代码会导致首屏加载缓慢、用户体验恶化。本课程将详细讲解如何利用 Webpack 解决代码拆分（Code Splitting）与异步加载问题，以及如何通过打包转换，让老旧浏览器也能无缝运行最新语法的代码。通过与竞品工具的横向对比，你将清晰定位 Webpack 在生态中的独特价值与适用场景。

在夯实理论基础之后，课程将迅速转入实战环节。开发环境（Development Mode）的配置并非简单的命令堆砌，而是涉及热更新（HMR）、Source Map 调试、开发服务器代理等高级技巧的综合运用。你将学会如何配置 `webpack-dev-server` 以提升开发效率，如何通过 Source Map 精准定位生产环境中的 Bug，以及如何优化构建速度以应对大型项目。

对于正处于职业进阶期的前端开发者而言，Webpack 不仅是一个打包工具，更是一种工程思维的体现。它迫使开发者重新审视模块边界、依赖管理与性能优化的关系。通过本课程的系统学习，你将不再满足于“会用配置”，而是能够“读懂源码”、“自定义 Plugin 与 Loader”，从而真正掌控构建流程。无论你是刚接触模块化的初学者，还是希望突破构建瓶颈的资深工程师，这门课程都将成为你前端技术栈中不可或缺的一块基石。让我们共同揭开 Webpack 的神秘面纱，用工程化的力量重塑代码结构，为打造高性能、可维护的现代 Web 应用打下坚实基础。

课程目录

1-1 [Webpack基础篇] Webpack基础篇-1.0.0课程介绍 (05:38)
1-2 [Webpack基础篇] Webpack基础篇-1.1.0为什么需要webpack (04:08)
1-3 [Webpack基础篇] Webpack基础篇-1.1.1如何解决作用域问题 (08:27)
1-4 [Webpack基础篇] Webpack基础篇-1.1.2如何解决代码拆分问题 (05:54)
1-5 [Webpack基础篇] Webpack基础篇-1.1.3如何让浏览器支持模块 (11:38)
1-6 [Webpack基础篇] Webpack基础篇-1.1.4webpack与竞品.mp4 (02:33)
1-7 [Webpack基础篇] Webpack基础篇-1.1.5本章小结 (01:52)
1-8 [Webpack基础篇] Webpack基础篇1.2.1-开发准备 (02:51)
1-9 [Webpack基础篇] Webpack基础篇-1.2.2-安装Webpack.mp4 (07:34)
1-10 [Webpack基础篇] Webpack基础篇-1.2.3-运行Webpack (04:57)
1-11 [Webpack基础篇] Webpack基础篇-1.2.4-自定义Webpack配置 (07:40)
1-12 [Webpack基础篇] Webpack基础篇-1.2.5-本章小结 (01:25)
1-13 [Webpack基础篇] Webpack基础篇-1.3.1-什么是插件 (02:52)
1-14 [Webpack基础篇] 基础篇1.3.2-使用HtmlWebpackPlugin (07:20)
1-15 [Webpack基础篇] Webpack基础篇-1.3.3-清理dist (01:34)
1-16 [Webpack基础篇] Webpack基础篇-1.3.4-本章小结 (39)
1-17 [Webpack基础篇] Webpack基础篇-1.4.1-mode选项 (02:31)
1-18 [Webpack基础篇] Webpack基础篇-1.4.2-使用source map (02:27)
1-19 [Webpack基础篇] Webpack基础篇-1.4.3-使用watch mode (01:44)
1-20 [Webpack基础篇] 基础篇-1.4.4-使用webpack-dev-server (03:36)
1-21 [Webpack基础篇] Webpack基础篇-1.4.5-本章小结 (53)
1-22 [Webpack基础篇] Webpack基础篇-1.5.1-资源模块介绍 (01:37)
1-23 [Webpack基础篇] Webpack基础篇-1.5.2-Resource资源 (07:49)
1-24 [Webpack基础篇] Webpack基础篇-1.5.3-inline 资源 (03:11)
1-25 [Webpack基础篇] Webpack基础篇-1.5.4-source资源 (02:54)
1-26 [Webpack基础篇] Webpack基础篇-1.5.5-通用数据类型 (06:12)
1-27 [Webpack基础篇] Webpack基础篇-1.5.6-本章小结 (01:25)
1-28 [Webpack基础篇] Webpack基础篇-1.6.1-什么是loader (01:28)
1-29 [Webpack基础篇] Webpack基础篇-1.6.3-抽离和压缩CSS (07:19)
1-30 [Webpack基础篇] Webpack基础篇-1.6.2-加载CSS (10:13)
1-31 [Webpack基础篇] Webpack基础篇-1.6.4-加载images图像 (03:05)
1-32 [Webpack基础篇] Webpack基础篇-1.6.5-加载fonts字体 (04:59)
1-33 [Webpack基础篇] Webpack基础篇-1.6.6-加载数据 (04:26)
1-34 [Webpack基础篇] Webpack基础1.6.7-自定义JSON模块parser (06:36)
1-35 [Webpack基础篇] Webpack基础篇-1.6.8-本章小结 (01:46)
1-36 [Webpack基础篇] 基础篇-1.7.1-为什么需要babel-loader (03:52)
1-37 [Webpack基础篇] Webpack基础篇1.7.2-使用babel-loader (04:04)
1-38 [Webpack基础篇] 1.7.3-regeneratorRuntime插件 (02:53)
1-39 [Webpack基础篇] Webpack基础篇-1.7.4-本章小结 (01:07)
1-40 [Webpack基础篇] Webpack基础篇-1.8.1-代码分离方法 (01:21)
1-41 [Webpack基础篇] Webpack基础篇-1.8.2-入口起点 (07:39)
1-42 [Webpack基础篇] Webpack基础篇-1.8.3-防止重复 (06:13)
1-43 [Webpack基础篇] Webpack基础篇-1.8.4-动态导入 (08:28)
1-44 [Webpack基础篇] Webpack基础篇-1.8.5-懒加载 (06:05)
1-45 [Webpack基础篇] Webpack基础篇-1.8.6-预获取-预加载模块 (04:42)
1-46 [Webpack基础篇] Webpack基础篇-1.8.7-本章小结 (01:26)
1-47 [Webpack基础篇] Webpack基础篇-1.9.1-输出文件的文件名 (03:17)
1-48 [Webpack基础篇] Webpack基础篇-1.9.2-缓存第三方库 (03:32)
1-49 [Webpack基础篇] Webpack基础篇-1.9.3-将js文件放到一个文件夹中 (01:16)
1-50 [Webpack基础篇] Webpack基础篇-1.9.4-本章小结 (01:24)
1-51 [Webpack基础篇] Webpack基础篇-1.10.1-公共路径 (02:40)
1-52 [Webpack基础篇] Webpack基础篇-1.10.2-环境变量 (06:57)
1-53 [Webpack基础篇] Webpack基础篇-1.10.3-拆分配置文件 (08:12)
1-54 [Webpack基础篇] Webpack基础篇-1.10.4-npm脚本 (06:36)
1-55 [Webpack基础篇] Webpack基础篇-1.10.5-提取公共配置 (03:51)
1-56 [Webpack基础篇] Webpack基础篇-1.10.6-合并配置文件 (06:52)
1-57 [Webpack基础篇] Webpack基础篇-1.10.7-本章小结 (01:53)