《玩转webpack》极客时间课程源码和课件
扫码关注公众号,定期推送 webpack 及其它前端技术文章,前期推送频率每周一篇 webpack 文章。
- 课程介绍
- 内容综述
- 为什么需要构建工具
- 前端构建演变之路
- 为什么选择webpack
- 初识webpack
- 环境搭建:安装webpack
- webpack初体验:一个最简单的例子
- 通过npm script运行webpack
- webpack核心概念之entry
- webpack核心概念之output
- webpack核心概念之loaders
- webpack核心概念之plugins
- webpack核心概念之mode
- 解析ECMASCript 6和React JSX
- 解析CSS、Less和Sass
- 解析图片和字体
- webpack中的文件监听
- webpack中的热更新及原理分析
- 文件指纹策略:chunkhash、contenthash和hash
- HTML 、CSS和JavaScript代码压缩
- 自动清理构建目录产物
- PostCSS插件autoprefixer自动补齐CSS3前缀
- 移动端CSS px自动转换成rem
- 静态资源内联
- 多页面应用打包通用方案
- 使用sourcemap
- 提取页面公共资源
- Tree Shaking的使用和原理分析
- Scope Hoisting使用和原理分析
- 代码分割和动态import
- 在webpack中使用ESLint
- webpack打包组件和基础库
- webpack实现SSR打包(上)
- webpack实现SSR打包(下)
- 优化构建时命令行的显示日志
- 构建异常和中断处理
- 构建配置包设计
- 功能模块设计和目录结构
- 使用ESLint规范构建脚本
- 冒烟测试介绍和实际运用
- 单元测试和测试覆盖率
- 持续集成和Travis CI
- 发布构建包到npm社区
- Git Commit规范和changelog生成
- 语义化版本(Semantic Versioning)规范格式
- 初级分析:使用webpack内置的stats
- 速度分析:使用speed-measure-webpack-plugin
- 体积分析:使用webpack-bundle-analyzer
- 使用高版本的webpack和Node.js
- 多进程/多实例构建
- 多进程并行压缩代码
- 进一步分包:预编译资源模块
- 充分利用缓存提升二次构建速度
- 缩小构建目标
- 使用Tree Shaking擦除无用的JavaScript和CSS
- 使用webpack进行图片压缩
- 使用动态Polyfill服务
- webpack启动过程分析
- webpack-cli源码阅读
- Tapable插件架构与Hooks设计
- Tapable是如何和webpack进行关联起来的?
- webpack流程篇:准备阶段
- webpack流程篇:模块构建和chunk生成阶段
- webpack流程篇:文件生成
- 动手编写一个简易的webpack(上)
- 动手编写一个简易的webpack(下)
- loader的链式调用与执行顺序
- 使用loader-runner高效进行loader的调试
- 更复杂的loader的开发场
- 实战开发一个自动合成雪碧图的loader
- 插件基本结构介绍
- 更复杂的插件开发场景
- 实战开发一个压缩构建资源为zip包的插件
- 商城技术栈选型和整体架构
- 商城界面UI设计与模块拆分
- React全家桶环境搭建
- 数据库实体和表结构设计
- 登录注册模块开发
- 商品模块开发
- 订单模块开发
- 谈谈Web商城的性能优化策略
- 功能开发总结
- 玩转webpack & 结课测试