📚 课程介绍
本课程深入浅出地讲解了Webpack 3.0在前端工程化中的应用，包括React、Angular、Vue等框架的集成，实战场景下的配置优化，以及Webpack的核心概念和高级用法。
📋 学习前提
1. HTML/CSS基础（网页结构和样式语言） 2. JavaScript基础（网页交互编程语言） 3. 熟悉至少一种前端框架（如React、Angular、Vue）
📖 课程目录
第1章 课程简介
1-1 课程背景
1-2 导学
第2章 学习准备
2-1 模块化（1）
2-2 模块化（2）
2-3 环境准备(mac)
2-4 webpack 简介
2-5 webpack 核心概念
第3章 由浅入深Webpack（1）
3-1 使用 webpack
3-2 打包 JS
3-3 编译 ES6
3-4 编译 typescript
3-5 打包公共代码（1）
3-6 打包公共代码（2）
3-7 代码分割和懒加载（1）
3-8 代码分割和懒加载（2）
3-9 处理 CSS – style-loader（1）
3-10 处理 CSS – style-loader（2）
3-11 处理 CSS – CSS-Loader
3-12 处理 CSS – 配置 Less – Sass
3-13 处理 CSS – 提取 CSS
3-14 PostCSS-in-webpack
3-15 Tree-shaking – JS Tree-shaking
3-16 Tree-shaking – CSS Tree-shaking
第4章 由浅入深Webpack（2）
4-1 文件处理（1）- 图片处理 – CSS中引入图片、Base64编码
4-2 文件处理（2）- 图片处理 – 压缩图片、自动合成雪碧图sprite、retina处理
4-3 文件处理（3）- 处理字体文件
4-4 文件处理（4）- 处理第三方 JS 库（providePlugin、imports-loader）
4-5 html in webpack（1）- 生成 HTML
4-6 html in webpack（2）- HTML 中引入图片
4-7 html in webpack（3）- 配合优化
第5章 Webpack 环境配置
5-1 开发环境 – Webpack Watch Mode
5-2 开发环境 – Webpack Dev Server – 本地 rewrite 规则
5-3 开发环境 – 代理远程接口
5-4 开发环境 – 模块热更新
5-5 开发环境 – 开启调试SourceMap
5-6 开发环境 – 设置 ESLint 检查代码格式
5-7 开发环境 – 区分开发环境 和 生产环境（1）
5-8 开发环境 – 区分开发环境 和 生产环境（2）
5-9 开发环境 – 使用 middleware 来搭建开发环境
第6章 Webpack 实战场景
6-1 Webpack实战场景 – 分析打包结果
6-2 webpack 实战场景 – 优化打包速度（1）
6-3 webpack 实战场景 – 优化打包速度（2）
6-4 webpack 实战场景 – 长缓存优化
6-5 webpack 实战场景 – webpack 多页面应用（1）
6-6 webpack 实战场景 – webpack 多页面应用（2）
第7章 Webpack 和 Vue
7-1 Vue 和 webpack – Vue-cli 介绍
7-2 Vue 和 webpack – Webpack template
7-3 vue 和 webpack – 开发配置（1）
7-4 vue 和 webpack – 开发配置（2）
7-5 vue 和 webpack – 实现简单 todolist（1）
7-6 vue 和 webpack – 实现简单 todolist（2）
第8章 Webpack 和 React
8-1 React 和 webpack – create-react-app 介绍
8-2 React 和 webpack – create-react-app 运行脚本介绍
8-3 React 和 Webpack – create-react-app 配置
8-4 React 和 Webpack – 自定义配置
第9章 Webpack 和 Angular
9-1 Angular 和 webpack – Angular – cli 介绍
9-2 Angular 和 webpack – 模块热更新 和 自定义配置
第10章 课程总结
10-1 课程总结 – webpack 面试常见问题
10-2 课程总结 – 课程回顾和总结
