- 高清
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
01 | 课程介绍
我是谁？我在前端开发方面有哪些经验？
你好，我是程柳锋。
目前我在腾讯担任 IVWEB 团队的社区和工程化负责人，也是前端工作流和规范工具 Feflow 的作者，这个贡献也获得了“腾讯 2018 年度十佳内部开源项目” 的奖项。
在腾讯工作期间，我先后参与了 NOW 直播、NOW 交友、群送礼、群视频等直播类产品的前端开发工作。
目前负责约 40 人的 Web 前端团队的工程效率建设，我曾经主导团队将 Fis3 构建切换到 webpack4，这个过程中涉及到多页面打包、SSR、PWA、Prerender 等多种构建场景，和多实例构建、并行压缩、公共资源分包、Tree-Shaking、动态 Polyfill 等构建策略。这个经历使我对 webpack 构建的打包速度和体积优化有了非常丰富的实战经验，同时也让我对前端工作流和团队开发规范实施有了深刻的认识。
为什么要深入掌握 webpack ？
首先，这个和我们目前的应用场景和开发方式是息息相关的。最近十年，手机、移动平板和可穿戴设备的迅速普及。Web 前端的开发触角也从传统的 PC 网页的开发发展到多终端的开发，所以我们就需要同时兼顾 PC、H5 等各类不同分辨率的网页开发。因此，针对不同的应用场景做不同的打包就显得很重要了，比如针对 PC 端的中后台应用，我们需要支持单页应用的打包构建。而 H5 页面通常对性能和可访问性有着极高的要求，因此需要通过构建来支持服务端渲染和 PWA 离线缓存。
精选留言(14)
Sky-fly看着很多干货毫不犹豫买了2019-05-28 8
欧罗巴皇老师，我刚才用getComputedStyle打印了no-ul的margin就是没有渲染过的样式16px 0
然后Mac os 和Windows谷歌火狐都是一样计算的offsetTop有问题2019-05-30 2
felixAngular-cli是不是不用webpack 了？作者回复: angular-cli 的底层打包还是基于webpack的，只是cli上层对 webpack 配置进行了一层封装，之前的版本里面还提供了 ng eject 用来导出 angular 项目的 webpack 配置的。
2019-05-27 2- Acelynn老师，我看你的课程表里面，没有讲proxy相关的点，不知道是不是我没看仔细。如果确实没有，到时候能不能讲点这方面的内容。对代理配置了解的很少，本地开发的脚本如果实时代理进行线上调试效果这方面不太会。
作者回复: 嗯嗯，虽然 webpack 也提供了 proxy 的支持，但是还是推荐使用更加专业的 Fiddler + willow 或者 Whistle。之前这方面也有做实践，但是 webpack 的 proxy 在接口需要校验 refer 的时候表现的不尽人意。
我们团队之前使用 Windows 开发的时候是用的Fiddler + willow，后面切换到 Mac 后 都是用 whistle(https://github.com/avwo/whistle) 了2019-05-29 1 - Sky-fly[赞],点击[ http://pinyin.cn/e19975 ]查看表情2019-05-28 1
- 欧罗巴皇老师，我用webpack进行多页面构建的时候研发环境有个问题，JS需要计算容器高度的时候，会先计算出高度再渲染样式，导致计算出来的数据不正确，请问怎么解决啊？
作者回复: 计算出来的数据不正确，这个可以再具体描述下不？我帮你参考参考
2019-05-28 1 
格瑞图作为一个不懂前端的初级架构师，想学习一下这么课程，老师有啥建议？作者回复: webpack 里面的概念和用法很多，支持的功能也很强大，可以挖深的点也很多。建议：
1. 掌握下 webpack 里面的基础用法，比如资源解析、代码压缩、文件指纹、热更新、source map 等等。
2. 学习的过程中多动手练习，实际的去编写 webpack 配置，由浅入深，编写的过程中多问几个为什么，最后的目的也是尽量可以做到手写一份 webpack 配置了
3. 除此之外，如果想更深入的学习，可以关注下第3、4、5、6章的知识2019-05-27 1
Objectivezt老师，部分webpack高阶用法,官方文档对照阅读理解方式可以介绍下不，讲一讲你对官方文档阅读实操心得？2019-09-24
嗜爱年华老师，这个课程的源码一直下载失败怎么回事，下载了几十次都是网络错误，https://github.com/geektime-geekbang/geektime-webpack-course，能解决下吗，急作者回复: 是不是网络不太好呀，换个网络试试
2019-08-31
海军Navy老师，thinkphp与vue结合开发多页面应用.
求教webpack打包方案2019-07-04
无极老师讲得很好作者回复: 感谢夸奖😄
2019-06-14- 欧罗巴皇还有我找好几个朋友的电脑试过了都是不对的，然后我用浏览器源码打开，style不存在，然后其中一个js文件里面发现style是它渲染的， 而不是直接放在html里面，导致后加载计算offsetTop。然后这个东西现在是无解，开发环境下webpack怎么样做到在html直接把样式打包到html里面。而不是用bundle.js里面渲染下去的。老师教教我啊。很难受。2019-06-08
- 欧罗巴皇这是我的源码
https://github.com/seafronthu/webpack4-multi-page
其中npm run dev开发环境下
console.log(document.querySelector('.ljb').offsetTop)打印出来的值不正确。
谢谢老师帮我看一下！作者回复: 看了下，打印出来的是22。这个没啥问题吧
2019-05-29 - Acelynn或者有没有这方面比较好的文章推荐一下？
作者回复: 这个资源不错：https://github.com/webpack-china/awesome-webpack-cn
学习课程的同时可以结合着看下2019-05-29
