直面工程化痛点：用 Webpack 3.0 打通开发闭环

很多前端学习者卡在“写得出代码”但“落不了地”的环节。你或许熟悉 Vue 或 React 的组件逻辑，却面对空白的创建页面无从下手；或者你能手动打包文件，但不知如何配置 Loader 和插件来压缩代码、代理请求、解决线上缓存失效。本课程直指这些工程化实操缺口，不泛泛而谈理论，而是基于 Webpack 3.0 这一经典稳定版本，带你搭建主流框架的开发环境。WebPack 3.0 虽然是旧版本，但其核心配置逻辑（如 Entry、Output、Loader、Plugin）至今仍是理解前端构建体系的基石。通过这门课，你弥补的是对构建工具底层逻辑的认知盲区，而非单纯追求最新版本特性。适合具备一定 JavaScript 基础、熟悉至少一种主流前端框架（Vue/React/Angular）基本使用，但缺乏独立搭建项目框架、优化生产环境代码经验的学习者。如果你连模块化思想（CommonJS/ES6 Modules）都未理清，建议先补全基础再进入本课，否则后续配置环节将非常吃力。

聚焦核心章节：从环境搭建到性能优化

学习路径建议遵循“先懂原理，再调配置，最后做优化”的节奏。首先攻克第 2 章“学习准备”，重点理解模块化演进和 Webpack 核心概念，这是后续所有配置的根基，切勿跳过。接着进入主体实践章节，重点看如何用 Webpack 集成 Vue、React 等框架，这部分决定了你能否快速复刻团队现有项目结构。最后，务必精读关于“线上代码缓存”、“体积优化”和“本地开发代理”的章节。许多开发者在入职或接私活时，最头疼的就是“为什么我的代码没更新”、“为什么包体积这么大”、“跨域怎么解”，这些正是本课通过 Webpack 配置具体解决的实战难题。不要试图一次性记住所有插件用法，而是针对每个痛点（如 SourceMap 生成、代码分割、Http Proxy）去查找对应的配置项，理解其作用机制。建议先跑通一个最小化的 Vue 项目，再逐步添加 React 对比学习，最后引入性能分析，这样能建立完整的工程化思维。

资料配合策略：动手验证与独立交付

资料包中的课件和笔记是辅助工具，核心价值在于“练习”。建议采用“视频学习 + 代码复现 + 破坏性测试”的三步法。看完一章，务必在本地环境中独立敲出对应配置，不要直接复制粘贴。特别是针对缓存和优化部分，尝试修改代码后观察构建产物变化，手动对比未优化和优化后的 bundle 大小及哈希值，从而深刻理解 Webpack 的工作机制。学完本课程，你应该能够独立完成以下任务：从零创建基于 Vue 或 React 的项目并配置 Webpack 进行开发及生产构建；根据业务需求配置 Babel、Style-Loader 等核心 Loader；实现 HMR（热模块替换）以消除重复刷新；生产环境下通过 Gzip、代码分割策略显著减小包体积；配置 devServer 解决 API 跨域代理问题。这不再是由着工具框架“傻瓜式”创建，而是真正掌握前端工程化的主动权。遇到配置报错，不要死记报错信息，而要回到第 2 章的核心概念中查找对应字段含义，培养通过文档和日志独立排查问题的能力。最终，你要能回答“当项目引入新特性导致构建失败时，我该如何调整 Webpack 配置以兼容新功能”，这才是课程结束时的能力标尺。

课程介绍

QQ_1771654137851.png 2026-2-21 14:13 上传 基于Webpack 3.0配合Loader、插件、工具的使用，搭建前端主流Vue、React、Angular的开发环境和项目框架，解决线上代码缓存、体积优化、本地开发环境代理请求等需求，提高开发效率！ 3.0版本特性 / 工程化 / 主流框架应用 / 前端性能优化 第1章 课程简介2 节 | 32分钟 讲述课程背景，从前端开发的变化 到 前端工具的发展变化，介绍了课程内容，课程安排。 1-1 课程背景 (27:54) 1-2 导学 (03:49) 第2章 学习准备5 节 | 67分钟 讲述模块化开发的思想、学习环境准备，webpack 的概况，版本更迭，核心概念等，为开始实践学习webpack 做准备。 2-1 学习准备 - 模块化（1） (14:49) 2-2 学习准备

课程目录

QQ_1771654137851.png   2026-2-21 14:13 上传 基于Webpack 3.0配合Loader、插件、工具的使用，搭建前端主流Vue、React、Angular的开发环境和项目框架，解决线上代码缓存、体积优化、本地开发环境代理请求等需求，提高开发效率！ 3.0版本特性 / 工程化 / 主流框架应用 / 前端性能优化
第1章 课程简介2 节 | 32分钟 讲述课程背景，从前端开发的变化 到 前端工具的发展变化，介绍了课程内容，课程安排。 1-1 课程背景 (27:54) 1-2 导学 (03:49)
第2章 学习准备5 节 | 67分钟 讲述模块化开发的思想、学习环境准备，webpack 的概况，版本更迭，核心概念等，为开始实践学习webpack 做准备。 2-1 学习准备 - 模块化（1） (14:49) 2-2 学习准备 - 模块化（2） (13:02) 2-3 学习准备 - 环境准备(mac) (07:35) 2-4 学习准备 - webpack 简介 (15:18) 2-5 学习准备 - webpack 核心概念 (16:08)
第3章 由浅入深Webpack（1）16 节 | 207分钟 由一个个的实例组成，介绍webpack 在处理各种实例的下的配置，实例包括 Typescript Ecmascript Less 语言的预编译，讲解了 Webpack 提取公共代码、代码分割、动态import、魔法注释、JS 和 CSS 的 TreeShaking等新特性。 3-1 由浅入深 webpack - 使用 webpack (12:38) 3-2 由浅入深 webpack - 打包 JS (12:03) 3-3 由浅入深 webpack - 编译 ES6 (26:09) 3-4 由浅入深 webpack - 编译 typescript (18:48) 3-5 由浅入深 webpack - 打包公共代码（1） (12:26) 3-6 由浅入深 webpack - 打包公共代码（2） (10:05) 3-7 由浅入深 webpack - 代码分割和懒加载（1） (15:25) 3-8 由浅入深 webpack - 代码分割和懒加载（2） (13:17) 3-9 由浅入深 webpack - 处理 CSS - style-loader（1） (14:30) 3-10 由浅入深 webpack - 处理 CSS - style-loader（2） (10:06) 3-11 由浅入深 webpack - 处理 CSS - CSS-Loader (09:27) 3-12 由浅入深 webpack - 处理 CSS - 配置 Less - Sass (03:02) 3-13 由浅入深 webpack - 处理 CSS - 提取 CSS (13:43) 3-14 由浅入深 webpack - PostCSS-in-webpack (11:14) 3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking (14:51) 3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking (09:03)
第4章 由浅入深Webpack（2）7 节 | 73分钟 图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。 4-1 文件处理（1）- 图片处理 - CSS中引入图片、Base64编码 (18:25) 4-2 文件处理（2）- 图片处理 - 压缩图片、自动合成雪碧图sprite、retina处理 (09:20) 4-3 文件处理（3）- 处理字体文件 (04:54) 4-4 文件处理（4）- 处理第三方 JS 库（providePlugin、imports-loader） (11:00) 4-5 html in webpack（1） - 生成 HTML (11:26) 4-6 html in webpack（2） - HTML 中引入图片 (10:02) 4-7 html in webpack（3） - 配合优化 (06:56)
第5章 Webpack 环境配置9 节 | 145分钟 介绍如何搭建 Webpack 本地开发环境，配置模块热更新、如何通过SourceMap调试代码、通过代码检查工具提高代码质量。 5-1 开发环境 - Webpack Watch Mode (08:05) 5-2 开发环境 - Webpack Dev Server - 本地 rewrite 规则- (19:33) 5-3 开发环境 - 代理远程接口 (16:09) 5-4 开发环境 - 模块热更新 (20:01) 5-5 开发环境 - 开启调试SourceMap (14:22) 5-6 开发环境 - 设置 ESLint 检查代码格式 (15:04) 5-7 开发环境 - 区分开发环境 和 生产环境（1） (12:49) 5-8 开发环境 - 区分开发环境 和 生产环境（2） (18:58) 5-9 开发环境 - 使用 middleware 来搭建开发环境 (19:28)
第6章 Webpack 实战场景6 节 | 108分钟 介绍Webpack 打包分析工具，如果使用webpack 长缓存优化，如何提升打包速度。 6-1 Webpack实战场景 - 分析打包结果 (18:25) 6-2 webpack 实战场景 - 优化打包速度（1） (08:28) 6-3 webpack 实战场景 - 优化打包速度（2） (18:02) 6-4 webpack 实战场景 - 长缓存优化 (17:59) 6-5 webpack 实战场景 - webpack 多页面应用（1） (21:46) 6-6 webpack 实战场景 - webpack 多页面应用（2） (22:34)
第7章 Webpack 和 Vue6 节 | 97分钟 介绍Webpack 和 Vue 的结合，Vue-cli 的模版介绍，以及模版中的各项配置。 7-1 Vue 和 webpack - Vue-cli 介绍 (09:51) 7-2 Vue 和 webpack - Webpack template (20:00) 7-3 vue 和 webpack - 开发配置（1） (19:32) 7-4 vue 和 webpack - 开发配置（2） (14:51) 7-5 vue 和 webpack - 实现简单 todolist（1） (15:55) 7-6 vue 和 webpack - 实现简单 todolist（2） (16:11)
第8章 Webpack 和 React4 节 | 61分钟 介绍Webpack 和 React 的结合，介绍官方脚手架 Create-React-App 以及各种配置。 8-1 React 和 webpack - create-react-app 介绍 (10:14) 8-2 React 和 webpack - create-react-app 运行脚本介绍 (17:46) 8-3 React 和 Webpack - create-react-app 配置 (16:55) 8-4 React 和 Webpack - 自定义配置 (15:32)
第9章 Webpack 和 Angular2 节 | 38分钟 介绍 Webpack 和 Angular的结合，介绍官方命令行工具 Angular-cli，以及如何自定义配置。 9-1 Angular 和 webpack - Angular - cli 介绍 (24:18) 9-2 Angular 和 webpack - 模块热更新 和 自定义配置 (12:45)
第10章 课程总结2 节 | 23分钟 webpack相关面试技术讲解。 10-1 课程总结 - webpack 面试常见问题 (15:00) 10-2 课程总结 - 课程回顾和总结 (07:52)
第11章 Webpack 4更新3 节 | 40分钟 针对Webpack3.x与4.x差异，讲解了一些比较基础的差异：默认配置、mode、Tree Shaking 和 代码切分 11-1 Webpack 4 默认配置 和 mode (13:28) 11-2 Webpack 4 优化、Tree Shaking 和 代码切分（1） (13:34) 11-3 Webpack 4 优化、Tree Shaking 和 代码切分（2） (12:43)