webpack到底能干啥？

Posted 2021-04-29 前端js动力节点

捕捉闪耀的瞬间 来自前端js动力节点 00:00 04:26

今天我们来看下webpack。很多同学有这样的疑问：

究竟webpack跟gulp孰优孰劣？区别是啥？

我仔细考虑了一下，大概可以这么解释：

webpack是个风流成性的交际花，她跟很多有名的框架都搞上了关系，借着这些框架的名气，自己的身价也倍增；而gulp则是个恪守妇道的名媛望族，她只是做好自己的分内事，不求名不图利，不乱搞关系。

所以说，很多同学都认为webpack是react或vue的官方指定配套工具，这种认识是错误的。因为交际花不仅接名人的生意，普通老百姓只要有钱也可以的嘛，不挑。

所以，今天我们就先把她从名人身边拉开，单独隔离起来，好好研究一下她到底有何伎俩？

1.模块化。

注意哦，叫模块化，不是妖魔化。我看很多人都把这个玩意给妖魔化了。何出此言呢？听老夫娓娓道来。

很早以前，js是没有什么规范可言的，大家都是无组织无纪律的乱写，大段大段的复制粘贴现象很常见，反正只要能达到目的就ok，因此js也沦为不入流的语言，为人所不齿；然而随着富客户端的出现，大家发现散兵游勇式的乱写是不行了，得学人家正规军的做法（尤其是java），于是requirejs跟seajs横空出世了。

二者皆出有一套解决方案，可以让js变得有组织有纪律，这就是模块化方案。

requirejs是老外所写，他们制定的规范叫amd，也就是Asynchronous Module Definition，俗称异步加载模块规范；而seajs呢，是咱们的国产货，定的规范名为cmd，也就是Common Module Definition，中文我就不翻译了啊，这名字起的比老外的牛气，有点一统天下的意思，只不过，呵呵。。。。

如此一来，前端分裂为两大阵营：amd派和cmd派。

这两派都觉得自己的规范好，而互相指摘对方的不足。然而不久后，事情又发生了变故。

谷歌开发出服务器版js，也就是node时，人家又制定了一套模块化规范，名为commonJS。实践证明，这个规范才是真正意义的、可以一统天下的普遍规范——简单好用，没坑。

然而node只是跑在服务端的，那么能否让这个好用的规范放到前端来，结束掉分裂的状态呢？于是，webpack就出现了！

看到这里，大家应该把模块化给搞清楚了吧。之所以会把它妖魔化，都是网上很多混乱不清的对amd和cmd的胡乱解释，造成其高深莫测的假象，其实这些东西跟我们一毛钱关系都没有，反正有了webpack，无论哪种规范，都可以统一起来了，你不用再费时间去学什么requirejs或seajs了，都是已经被淘汰的东西了。

而且webpack更进一步，不仅js可以模块化，甚至css、图片等都可以模块化，这就是我们说的，webpack第一个跟gulp大不一样的地方——模块化。

2.翻译。

大家知道，es6在很多浏览器都是不支持的，需要翻译为es5才能使用；而react鼓捣出的jsx，是个浏览器不认识的东西，也需要翻译转换，诸如此类的需求还是比较多的，正像有需求就有市场的道理，webpack另一个重要的功能，就是——做翻译工作。

3.压缩合并等常见操作。

常见的压缩合并代码等操作，gulp可以做，webpack也可以。但是，这也并不意味着他俩是亲戚，也或者说谁可以取代谁。wepback的重心是将你的代码打包完成模块化后输出，压缩合并等操作不过是打包过程中顺带进行的，并不是它的主营业务。

好啦，webpack的技能大概就列举这么多了，大家应该也明白跟gulp的区别了吧。虽然做的业务有交叉，但其实二者没有什么关联，都是各有所长的工具而已，还是那句话——适合自己的才是最好的。

下回我们开始认真研究下webpack，今天先到这里了~~