玩转webpack-程柳锋-极客时间-返现24元

极客时间出品的《玩转webpack》由程柳锋所作，程柳锋是腾讯高级工程师，IVWEB团队社区和工程化负责人。本课全方位掌握webpack核心技能和优化策略。

订阅价格：

限时 ¥68原价 ¥99。已有2812人购买 · 共84讲 · 84课时，约600分钟，专栏为视频课程，可以通过极客时间APP/小程序/网站学习。

用我的邀请购买，还会额外返现24元。购买的朋友请加我微信号 dismissmewp ，备注：返现。

课程背景

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

同时，webpack 凭借着自身社区生态丰富，配置灵活和插件化扩展，官方更新迭代速度快等优点，已成为前端构建领域里最炙手可热的构建工具。在 GitHub上，webpack 也拥有着 48.8k 的 star。
可是，不少前端人，对于 webpack 的使用和了解只停留在了 20% 的基础功能上。每天开发写 npm run dev，该上线了按 npm run build，执行个命令，webpack 就帮你打包好了。

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

拿到一份用 vue-cli 和 create-react-app 生成的 webpack 配置，却不知道它们的含义；

想要深入了解 webpack 内部原理，但发现看不懂 webpack 源码，也不知该从何下手；

在做项目构建时，遇到速度或体积的问题时，发现自己拿不出一套完善的优化思路；

在社区的插件和 loader 不满足实际项目时，却无法自定义出一个定制化的插件和 loader，来解决眼下的问题。

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

课程介绍

我是谁？我在前端开发方面有哪些经验？

你好，我是程柳锋。

目前我在腾讯担任 IVWEB 团队的社区和工程化负责人，也是前端工作流和规范工具 Feflow 的作者，这个贡献也获得了“腾讯 2018 年度十佳内部开源项目” 的奖项。

在腾讯工作期间，我先后参与了 NOW 直播、NOW 交友、群送礼、群视频等直播类产品的前端开发工作。

目前负责约 40 人的 Web 前端团队的工程效率建设，我曾经主导团队将 Fis3 构建切换到 webpack4，这个过程中涉及到多页面打包、SSR、PWA、Prerender 等多种构建场景，和多实例构建、并行压缩、公共资源分包、Tree-Shaking、动态 Polyfill 等构建策略。这个经历使我对 webpack 构建的打包速度和体积优化有了非常丰富的实战经验，同时也让我对前端工作流和团队开发规范实施有了深刻的认识。

为什么要深入掌握 webpack ？

首先，这个和我们目前的应用场景和开发方式是息息相关的。最近十年，手机、移动平板和可穿戴设备的迅速普及。Web 前端的开发触角也从传统的 PC 网页的开发发展到多终端的开发，所以我们就需要同时兼顾 PC、H5 等各类不同分辨率的网页开发。因此，针对不同的应用场景做不同的打包就显得很重要了，比如针对 PC 端的中后台应用，我们需要支持单页应用的打包构建。而 H5 页面通常对性能和可访问性有着极高的要求，因此需要通过构建来支持服务端渲染和 PWA 离线缓存。

其次， Node.js 自 2009 年发布以来，至今已历时十年。这十年间，整个 Node.js 社区异常繁荣。迄今为止，已经有 80 多万的第三方组件，并且这个数字每天还在快速增加。而 NPM 的组件在浏览器端的 JS 代码中并不能直接引入，这个时候就需要借助 webpack 等构建工具来快速复用各种优秀成熟的组件，从而加速 Web 开发。

最后，当下前端社区里最为流行的三大框架 React、Angular.js 和 Vue，它们的一些语法，比如 JSX 和 Vue 指令，这些都是浏览器无法直接解析的，也需要经过构建工具进行转换，而 webpack 毫无疑问是前端构建领域里最耀眼的一颗星。无论你前端走那条线，你都要有很强的 webpack 知识。熟悉 webpack 的使用和原理可以让你拓宽前端技术栈，在发现页面打包的速度和资源体积的问题时能够知道如何排查问题和优化手段，同时，熟悉 webpack 的原理将会对其它跨端开发比如小程序、Weex、ReactNative、Electron 等框架的打包快速上手。

初学者在学习 webpack 的过程中会遇到哪些困难？

刚刚接触 webpack 的开发者可能对 webpack 的打包理念：一切皆为模块感到困惑，在 webpack 中，不仅仅 JS 是模块，其它的 HTML、CSS、图片和字体等都可以成为模块。

其次，webpack 的配置异常灵活，并且具备强大的插件化扩展能力。因为这个原因，很多开发者都曾经自嘲“就缺一个 webpack 配置工程师了”。上手 webpack 确实是需要了解 webpack 里面的众多新的概念：entry，output，mode，loaders 和 plugins、热更新、Code Spliting、Tree-Shaking 等，这个可能会让初学者感到 webpack 很复杂，望而生畏，也造成一定的学习成本。

另外，webpack 的进一步深入学习是有一定的学习曲线的。包括 webpack 打包的速度、体积、页面加载时的性能优化等，是需要具备比较全面的 webpack 专业知识，搞懂 webpack 内部的运行原理和插件机制才能深入掌握。

因此本课程设计的时候遵循由浅入深的原则，内容方面共分为 4 个阶段：基础篇、进阶篇、原理篇和实战篇。基础篇主要是帮你掌握 webpack 的核心概念和开发必备技巧，进阶篇将会让你以工程化的思维去编写一份健壮可维护的 webpack 构建配置，同时掌握 webpack 构建速度和体积的优化策略，原理篇将会通过 webpack 源码让你了解 webpack 内部的运行原理和编写自定义 Loader 和插件的能力，实战篇将会从一个 Web 商城项目出发，讲解 webpack 如何运用到实际的项目中去，并且最大化地提升开发阶段和发布阶段的构建体验。

本课程适用于前端开发者和跨端开发者的学习，能够帮助初学者和开发者克服 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，完成各类前端项目的打包构建工作。

《玩转webpack》专栏详细目录

第一章：wepack与构建发展简史

1. 课程介绍
2. 内容综述
3. 为什么需要构建工具？
4. 前端构建演变之路
5. 为什么选择webpack ?
6. 初识 webpack
7. 环境搭建：安装webpack
8. webpack初体验：一个最简单的例子
9. 通过 npm script 运行 webpack

第二章：webpack基础用法

1. webpack核心概念之entry
2.  webpack核心概念之output
3.  webpack核心概念之loaders
4.  webpack核心概念之plugins
5.  webpack核心概念之mode
6.  解析 ES6 和 React JSX
7. 解析 CSS、Less 和 Sass
8. 解析图片和字体
9.  webpack中的文件监听
10.  webpack中的热更新及原理分析
11. 文件指纹策路^：chunkhash、contenthash 和 hash
12.  HTML、CSS和JS代码压缩

第三章：webpack进阶用法

1. 自动清理构建目录产物
2. PostCSS插件autoprefixer自动补齐CSS3前缀
3. 移动端CSS px自动转换成rem
4. 静态资源内联
5. 多页面应用打包通用方案
6. 使用 sourcemap
7. 提取页面公共资源
8.  Tree Shaking的使用和原理分析
9.  Scope Hoisting的使用和原理分析
10. 代码分割和动态import
11. 在 webpack 中使用 ESLint
12. webpack实现SSR打包
13. Prerender■渲染骨架屏
14. webpack打包组件和基础库
15. 优化构建时命令行的显示曰志
16. 构建异常和中断处理

第四章：编写可维护的webpack构建配置

1. 构建配置包设计
2. 功能模坱设计和目录结构
3. 使用ESLint规范构建脚本
4. 冒烟测试介绍和实际运用
5. 单元测试和测试覆盖率
6. 持续集成和Travis CI
7. 发布构建包到npm社区
8.  Git Commit 规范和 changelog 生成
9. 语义化版本（Semantic Versioning)规范格式

第五章：webpack构建速度和体积优化策略

1. 如何分析页面打包问题？
2. 初级分析：使用webpack内置的stats
3. 速度分析：使用 speed-measure-webpack-plugin
4. 体积分析：使用 webpack-bundle-analyzer
5. 使用高版本的webpack和Node.js
6. 多进程/多实例枸建
7. 多进程并行压缩代码
8. 使用exterals分离基础包
9. 进一步分包：预编译资源模块 充分利用缓存提升二次构建速度
10. 缩小构建目标
11.  使用 Scope Hoisting
12. 使用Tree Shaking擦除无用的JS和CSS
13. 使用webpack进行图片压缩
14. 使用动态Polyfill服务

第六章：通过源码掌握webpack打包原理

1. webpack的本质与Tapable介绍
2.  Tapable中的Sync*类型的钩子
3.  Tapable中的async*类型的钩子
4.  webpack中的事件流
5.  compile 和 compilation 对象介绍
6.  webpack的入口文件
7.  webpack参数传递与编译启动
8. 编译与构建主流程
9. 生成最终assets
10. 通过emit输出构建资源到path
11. 动手编写一个简易的webpack

第七章：编写loader和插件

1. loader的执行顺序
2.  loader匹配文件的可选方式
3. 写一个自动合成雪碧图的loader
4.  webpack Plugin AP丨介绍
5.  compiler对象介绍
6.  compilation对象介绍
7. 写一个压缩构建资源为zip包的插件

第八章：React全家桶和webpack开发商城项目

1. 商城技术栈选型和整体架构
2. 商城界面ui设计与模块拆分
3.  React全家桶环境搭建
4. 编写服务端API
5. 登录注册页模坱开发
6. 商城列表页模坱开发
7. 商城详情页模坱开发
8. 商城订单页模坱开发
9.  webpack在开发和生产钚境打包

课程收获

快速掌握基础技能和进阶用法；

熟悉打包速度和体积优化策略；

深入源代码了解打包构建原理；

编写健壮易维护的 webpack 配置。

 

我的公众号：猿人学 Python 上会分享更多心得体会，敬请关注。

***版权申明:若没有特殊说明，文章皆是猿人学 yuanrenxue.con 原创，没有猿人学授权，请勿以任何形式转载。***