玩转webpack / 全方位掌握webpack核心技能和优化策略
程柳锋
腾讯高级工程师,IVWEB团队社区和工程化负责人
 
  • 课程目录
  • 课程介绍
  • 01 | 课程介绍

  • 02 | 内容综述

  • 03 | 为什么需要构建工具

  • 04 | 前端构建演变之路

  • 05 | 为什么选择webpack

  • 06 | 初识webpack

  • 07 | 环境搭建:安装webpack

  • 08 | webpack初体验:一个最简单的例子

  • 09 | 通过npm script运行webpack

  • 10 | webpack核心概念之entry

  • 11 | webpack核心概念之output

  • 12 | webpack核心概念之loaders

  • 13 | webpack核心概念之plugins

  • 14 | webpack核心概念之mode

  • 15 | 解析ECMASCript 6和React JSX

  • 16 | 解析CSS、Less和Sass

  • 17 | 解析图片和字体

  • 18 | webpack中的文件监听

  • 19 | webpack中的热更新及原理分析

  • 20 | 文件指纹策略:chunkhash、contenthash和hash

  • 21 | HTML 、CSS和JavaScript代码压缩

  • 22 | 自动清理构建目录产物

  • 23 | PostCSS插件autoprefixer自动补齐CSS3前缀

  • 24 | 移动端CSS px自动转换成rem

  • 25 | 静态资源内联

  • 26 | 多页面应用打包通用方案

  • 27 | 使用sourcemap

  • 28 | 提取页面公共资源

  • 29 | Tree Shaking的使用和原理分析

  • 30 | Scope Hoisting使用和原理分析

  • 31 | 代码分割和动态import

  • 32 | 在webpack中使用ESLint

  • 33 | webpack打包组件和基础库

  • 34 | webpack实现SSR打包(上)

  • 35 | webpack实现SSR打包(下)

  • 36 | 优化构建时命令行的显示日志

  • 37 | 构建异常和中断处理

  • 38 | 构建配置包设计

  • 39 | 功能模块设计和目录结构

  • 40 | 使用ESLint规范构建脚本

  • 41 | 冒烟测试介绍和实际运用

  • 42 | 单元测试和测试覆盖率

  • 43 | 持续集成和Travis CI

  • 44 | 发布构建包到npm社区

  • 45 | Git Commit规范和changelog生成

  • 46 | 语义化版本(Semantic Versioning)规范格式

  • 47 | 初级分析:使用webpack内置的stats

  • 48 | 速度分析:使用speed-measure-webpack-plugin

  • 49 | 体积分析:使用webpack-bundle-analyzer

  • 50 | 使用高版本的webpack和Node.js

  • 51 | 多进程/多实例构建

  • 52 | 多进程并行压缩代码

  • 53 | 进一步分包:预编译资源模块

  • 54 | 充分利用缓存提升二次构建速度

  • 55 | 缩小构建目标

  • 56 | 使用Tree Shaking擦除无用的JavaScript和CSS

  • 57 | 使用webpack进行图片压缩

  • 58 | 使用动态Polyfill服务

  • 59 | webpack启动过程分析

  • 60 | webpack-cli源码阅读

  • 61 | Tapable插件架构与Hooks设计

  • 62 | Tapable是如何和webpack进行关联起来的?

  • 63 | webpack流程篇:准备阶段

  • 64 | webpack流程篇:模块构建和chunk生成阶段

  • 65 | webpack流程篇:文件生成

  • 66 | 动手编写一个简易的webpack(上)

  • 67 | 动手编写一个简易的webpack(下)

  • 68 | loader的链式调用与执行顺序

  • 69 | 使用loader-runner高效进行loader的调试

  • 70 | 更复杂的loader的开发场

  • 71 | 实战开发一个自动合成雪碧图的loader

  • 72 | 插件基本结构介绍

  • 73 | 更复杂的插件开发场景

  • 74 | 实战开发一个压缩构建资源为zip包的插件

  • 75 | 商城技术栈选型和整体架构

  • 76 | 商城界面UI设计与模块拆分

  • 77 | React全家桶环境搭建

  • 78 | 数据库实体和表结构设计

  • 79 | 登录注册模块开发

  • 80 | 商品模块开发

  • 81 | 订单模块开发

  • 82 | 谈谈Web商城的性能优化策略

  • 83 | 功能开发总结

  • 84 | 结束语

课程背景

近几年来,前端领域飞速发展,工作早已不再是切几张图,写几个页面那么简单,而是需要前端开发者更加专注业务需求。webpack,就是这么一款工具,将前端不断出现的新模块、新资源、新需求,进行自动化整合、梳理、输出,极大提高了我们的工作效率。

同时,webpack 凭借着自身社区生态丰富,配置灵活和插件化扩展,官方更新迭代速度快等优点,已成为前端构建领域里最炙手可热的构建工具。在 GitHub上,webpack 也拥有着 48.8k 的 star。

可是,不少前端人,对于 webpack 的使用和了解只停留在了 20% 的基础功能上。每天开发写 npm run dev,该上线了按 npm run build,执行个命令,webpack 就帮你打包好了。

很多人根本不知道,这整个过程究竟发生了什么,导致之后出现问题,也无法对症下药,无从下手。以下这些情景,你肯定或多或少都遇到过:

  1. 拿到一份用 vue-cli 和 create-react-app 生成的 webpack 配置,却不知道它们的含义;
  2. 想要深入了解 webpack 内部原理,但发现看不懂 webpack 源码,也不知该从何下手;
  3. 在做项目构建时,遇到速度或体积的问题时,发现自己拿不出一套完善的优化思路;
  4. 在社区的插件和 loader 不满足实际项目时,却无法自定义出一个定制化的插件和 loader,来解决眼下的问题。

其实,掌握 webpack 是具有一定的学习曲线和成本的。如何理解 webpack “一切皆为模块”的打包理念?如何快速掌握 webpack 的构建配置?如何让 webpack 成为升职加薪利器,而不是成为一名“ webpack 配置工程师”?

程柳锋,腾讯高级工程师,负责 IVWEB 团队的社区和工程化。同时,他还在空闲时间开发了「前端工作流和规范工具 Feflow」项目,获得了“腾讯 2018 年度十佳内部开源项目” 奖项。

在腾讯,他曾主导团队将 Fis3 构建切换到 webpack4,过程中涉及到多页面打包、SSR、PWA、Prender 等多种构建场景,和多实例构建、并行压缩、公共资源分包、tree shaking、动态 Polyfill 等构建策略。

这些经历,使他对 webpack 构建的打包速度和体积优化有了非常丰富的实战经验,同时也对前端工作流和团队开发规范实施有了深刻的认识。

工欲善其事,必先利其器。跟着学,保证你对 webpack 的掌握可以超过 80% 的前端人,进入一个全新的前端技术栈。

课程亮点

整个课程基于最新版 webpack 4 设计,遵循由浅入深的原则,将内容分为 4 个阶段。

  • 基础篇:从最基础的知识讲起,由浅入深,教你掌握 webpack 的核心概念和开发必备技巧。
  • 进阶篇:带你编写 webpack 构建配置的同时,轻松掌握构建速度和体积的优化策略。
  • 原理篇:抽丝剥茧,通过 webpack 源码,让你了解 webpack 内部的运行原理的同时,也具备编写自定义 loader和插件的能力。
  • 实战篇:从一个 Web 商城项目出发,讲解 webpack 如何运用到实际的项目中,并且最大化地提升开发阶段和发布阶段的构建体验。

无论你是对 webpack 一无所知的初学者,还是经验丰富的前端工程师,都能够通过这个课程,提升对 webpack 的理解,建立属于你自己的 webpack 知识体系,并在工作中能够高效的使用 webpack,完成各类前端项目的打包构建工作。

课程收获

  1. 快速掌握基础技能和进阶用法;
  2. 熟悉打包速度和体积优化策略;
  3. 深入源代码了解打包构建原理;
  4. 编写健壮易维护的 webpack 配置。

课程目录

限时福利

如何在电脑端观看视频

  1. 用浏览器访问 https://time.geekbang.org ,登录极客时间账号;
  2. 然后在“讲堂”板块选择“视频课程”标签,点击相应的视频课程即可观看。