专栏名称：玩转 webpack
专栏作者：程柳锋·腾讯高级工程师
更新进度：✅ 完结

🤖 AI 导学

构建速度慢、打包体积大，是前端工程化中影响开发效率和用户体验的关键瓶颈。对于关注人工智能应用落地的开发者而言，高效的资源构建流程能显著加速模型可视化界面或数据看板的迭代。本课程深入讲解 Tree Shaking 与 Scope Hoisting 的原理与实践，帮助去除无用代码、优化执行性能；同时覆盖多进程并行压缩、动态 Polyfill 等策略，有效控制输出体积。通过理解 webpack 模块构建机制与插件架构，你将能编写定制化 loader 和插件，灵活应对 AI 项目中特有的资源处理需求，建立扎实的构建优化认知体系。

📖 课程介绍

近几年来，前端领域飞速发展，工作早已不再是切几张图，写几个页面那么简单，而是需要前端开发者更加专注业务需求。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 配置工程师”？

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

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

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

👤 讲师

程柳锋
🔹 腾讯高级工程师，负责 IVWEB 团队的社区和工程化。
🔹 同时，他还在空闲时间开发了「前端工作流和规范工具 Feflow」项目，获得了“腾讯 2018 年度十佳内部开源项目” 奖项。
🔹 在腾讯，他曾主导团队将 Fis3 构建切换到 webpack4，过程中涉及到多页面打包、SSR、PWA、Prender 等多种构建场景，和多实例构建、并行压缩、公共资源分包、tree shaking、动态 Polyfill 等构建策略。
🔹 这些经历，使他对 webpack 构建的打包速度和体积优化有了非常丰富的实战经验，同时也对前端工作流和团队开发规范实施有了深刻的认识。
🔹 工欲善其事，必先利其器。跟着学，保证你对 webpack 的掌握可以超过 80% 的前端人，进入一个全新的前端技术栈。

✅ 你将获得

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

🎵 试听：
01 | 课程介绍

🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽🔽
👉 点击赞助本频道，获取所有课程 👈
🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼🔼

👉 点击一键获取
🖥 查看本课程目录