webpack心得总结

5,549 阅读7分钟

如无意外,每周更新时间为周日

1.webpack的好用之处


我对学习webpack的起因很简单,因为它够潮,而我恰恰喜欢潮的东西。我之前也了解过webpack,但是仅仅是局限于他的使用方法,能够看懂他的配置文件。而我这次对他的用处有了更深的了解。

①轻松使用es6
首先从es6说起吧,浏览器对es6的支持度并不高。仅仅实现了其中的一部分而已,但是es6的实用性以及好用性是不用质疑的。从某些方面来说他不仅仅是对之前版本的一次扩展,更是对之前版本的一个修复。

//写法1:
var hi = function () { this.name = 'MrXu' }
hi()
console.log(name) // MrXu
//写法2:
var hi = () => { this.name = 'MrXu' }
hi()
console.log(name) // 报错
123456789

上面只是es6新增加功能中的箭头函数,他阻止了函数提升,让代码调用能够按照调用顺序来。想要全面系统的了解可以看阮一峰写的那本es6的书,里面写了如何使用es5实现es6的某些方法,以及es6新的语法使用场景,挺不错的(看书链接戳我

说了这么多都是为了跟webpack扯上关系的,webpack可以在浏览器不支持es6语法的情况下让你使用es6语法。这样你就可以边看边使用了。现在的webpack版本集成度很高,省掉了很多的配置,现在能够能够直接编译es6语法,像之前的版本都需要自己加入babel加载器才可以打包es6,现在真是方便了很多。并且加入了中文翻译,看起来更加的方便

②压缩文件都交给计算机
我是一个比较喜欢追求完美的人,但有时候因为懒就退而求其次了。就好比完整独立的JS代码,应该压缩一下才是最好的。因为这样不仅保证了你的源代码不至于暴露无疑,也能保证更下的体积,从而提高浏览器加载效率。但是谁愿意每次都手动找压缩工具压缩一下呢,像这种重复的劳动实现自动化实在合适不过了,而webpack就能够轻松实现帮助你打包

③代码改了,可是浏览器没有出来效果。怎么回事?
这种情况说实在的真的挺烦人的,不管你是新手还是老手也总不可能第一时间就想到原来是浏览器缓存。等发现真相的时候都有一种吐血的冲动,防止浏览器缓存方法还是挺多的,
1.例如你给浏览器设置成不缓存文件的配置,但是这样对于大多数人都不理想,很多人都想记住密码不想有些网站老是二次输入,
2.还有一种就是在加载文件的时候修改文件名或者是加时间戳,从而达到让浏览器重现加载。我估计一个大的JS文件可能要看好几十次还不止,改好几十次你有这个耐心么
上面俩种方法大部分人都不一定回去真的做,有了webpack你可以轻松实现方法二,并且连刷新浏览器都剩下了。轻松简单加愉快

③减少界面请求数量
有许多图片图标都是放到一张图片上的,这么做的原因就是因为能够减少图片体积,减少带宽,同样的将JS,css文件打包成一个也能够减少体积使得界面加载的更快

④顶级应用,spa模式
我个人认为打包带来的最大的好处就是诞生了SPA模式(single page application 单页面应用)。

以上这四种算是比较常见的使用了,你也可以自己写加载器为自己实现定制化打包,好处多多

⑤webpack可以这样学习
打开webpack官方文档戳我


1.第一步单击文档进入文档资料界面(英文不好的请选择最右边的语言选择,选择中文)

2.根据指南进行做小例子
我刚开始看webpack的时候先看的概念,这对于大多数人来说是很枯燥乏味的,容易失去学习的信心,但是先做小例子就不一样了。做东西不仅能够给你实时的反馈,增加你的参与感和认同感。而且例子里面涉及到的都是你用的特别多的东西。个人感觉例子做出来的东西基本上能够满足你80%的需求
3.做完了例子在做知识补充
这个时候你就可以看loaders,插件,API了。也不用看的太过于具体,只需要一览标题即可,因为这个时候你还不需要用他们做一个具体的东西,看的太多反而不好。
4.是时候读概念了
搞完了上面这些,你赶紧自己已经无所不能了,但是有一种飘飘然的感觉。那是因为你没有找到根,总是在跟着别人走,有些牵制于人。当你有这种感觉得时候来看看概念你不仅不会太乏味(乏味依然是有的,就像上政治课一样,但是你现在是一个有追求的人了。所以不会太乏味),而且会收货颇丰

2.网易云的即时通讯

即时通讯的涉猎领域是非常广的,电商,医疗,畜牧等等各个行业都会想去弄一个即时通讯的功能,及时的跟客户沟通是增加客户粘性的一个非常好的方式。在这里之所以说网易云的,得益于公司使用了网易云的即时通讯产品。

我之前还用过layui的即时通讯,这个跟网易云的比起来真的是小屋见大巫了。网易的不仅提供了web端的,PC端的,安卓,苹果,h5各个端的都有。而且开发者只需要对接上用户信息即可快速使用,非常方便。



我这里也整理了俩篇网易云即时通讯的使用心得:
网易即时通讯心得体会(1)
网易即时通讯心得体会(2)

3.免费的讲解Promise使用的视频,有很多奇淫技巧

要视频网址戳这里


Promise这个功能在node开发中是非常重要的,如果你觉得你还不知道他应该怎么用,可以看看这个视频,视频是拥有11年开发经验的老前辈做的,很有质量。

4.阿里出的一本免费的书,《不止代码》


关注《阿里技术》公众号回复代码即可获得下载电子版链接,里面总结了阿里最近发布的优秀的文章,都是很体系化的,对于扩展很有意义。

5.如何在gitHub上发布个人项目,并且生成网站总之包含了很多github创建项目的技巧和心得

视频地址戳这里

做视频的人本身就在github上有成熟的项目”wangEdit”,star的数量好几千,作者定期维护。他将本人的经验融入进了视频里,告诉大家如何从零做一个前段开源项目,需要注意什么,以及如何宣传和维护

往期文章:
深入前端学习原来这么有趣 第1期

想要第一时间看的我的文章可以关注我的公众号”吵吵日记”,或者是扫描下方二维码