〖课程介绍〗:

基于Webpack 3.0配合LoADer、插件、工具的使用，搭建前端主流Vue、React、Angular的开发环境和项目框架，解决线上代码缓存、体积优化、本地开发环境代理请求等需求，提高开发效率！

〖课程目录〗:

• 第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)

*声明：课程资源购自网络，版权归原作者所有，仅供参考学习使用，严禁外传及商用，若侵犯到您的权益请联系客服删除。