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

你好，我是程柳锋。

目前我在腾讯担任 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 去完成各类前端项目的打包构建工作。

我是程柳锋，我在极客时间等你。