课程背景

近几年来，前端领域飞速发展，工作早已不再是切几张图，写几个页面那么简单，而是需要前端开发者更加专注业务需求。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. 订阅后，分享专属海报，每邀请一位好友订阅有奖励。
2. 戳此添加社群管理员，进入技术交流 & 福利群。
3. 戳此申请学生认证，订阅课程一律 5 折。

如何在电脑端观看视频

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

订阅须知

1. 本课程为视频课程，共 84 讲，订阅成功后即可通过“极客时间”App 端、小程序端、Web 端永久观看；
2. 由于视频内容为虚拟商品，一经订阅，概不退款；
3. 企业批量购买请点击“企业充值”了解详情，可支持员工选课，企业支付。