第一章: wepack与构建发展简史
课程介绍
内容综述
为什么需要构建工具?
前端构建演变之路
为什么选择webpack?
初识webpack
环境搭建:安装webpack
webpack初体验:一个最简单的例子
通过npm script运行webpack
第二章: webpack基础用法
webpack核心概念之entry
webpack核心概念之output
webpack核心概念之loaders
webpack核心概念之plugins
webpack核心概念之mode
解析ES6和React JSX
解析CSS, Less和Sass
解析图片和字体
webpack中的文件监听
webpack中的热更新及原理分析
文件指纹策略: chunkhash, contenthash和hash
HTML, CSS和JS代码压缩
第三章: webpack进阶用法
自动清理构建目录产物
PostCsS插件autoprefixer自动补齐CSS3前缀
移动端CSS px自动转换成rem
静态资源内联
3页面应用打包通用方案
使用sourcemap
提取页面公共资源
Tree Shaking的使用和原理分析
Scope Hoisting的使用和原理分析
代码分割和动态import
在webpack中使用ESLint
webpack实现SSR打包
Prerender渲染骨架屏
webpack打包组件和基础库
优化构建时命令行的显示日志
构建异常和中断处理
第四章:编写可维护的webpack构建配置
构建配置包设计
功能模块设计和目录结构
使用ESLint规范构建脚本
冒烟测试介绍和实际运用
单元测试和测试覆盖率
持续集成和Travis Cl
发布构建包到npm社区
Git Commit规范和changelog生成
第五章: webpack构建速度和体积优化策略
如何分析页面打包问题?
初级分析:使用webpack内置的stats
速度分析:使用speed-measure-webpack-plugin
体积分析:使用webpack-bundle-analyzer
使用高版本的webpack和Node.js
多进程/多实例构建
多进程并行压缩代码
使用exterals分离基础包
进一步分包:预编译资源模块
充分利用缓存提升二次构建速度
缩小构建目标
使用Scope Hoisting
使用Tree Shaking擦除无用的JS和CSS
使用webpack进行图片压缩
使用动态Polyfill服务
第六章:通过源码掌握webpack打包原理
webpack的本质与Tapable介绍
Tapable中的Sync类型的钩子
Tapable中的async类型的钩子
webpack中的事件流
compile和compilation对象介绍
webpack的入口文件
webpack参数传递与编译启动
编译与构建主流程
生成最终assets
第七章:编写loader和插件
loader的执行顺序
loader匹配文件的可选方式
写一个自动合成雪碧图的loader
webpack Plugin API介绍
compiler对象介绍
compilation对象介绍
写一个压缩构建资源为zip包的插件
第八章: React全家桶和webpack开发商城项目
商城技术栈选型和整体架构
商城界面U1设计与模块拆分
React全家桶环境搭建
编写服务端API
登录注册页模块开发
商城列表页模块开发
商城详情页模块开发
商城订单页模块开发
webpack在开发和生产环境打包
