我为什么要使用Webpack?

381 阅读4分钟

简单讲讲我与前端的故事吧。

刚接触前端时,所有静态资源CSS、图片和JS都是手动引入HTML页面中,这并没有什么不好,想要什么就引入什么嘛。另外,所见即所得,开发好的项目文件直接就可以上传服务器,很方便,因此这样的开发方式一直持续到前不久,也就是开始正式使用Webpack之前。

渐渐地,我开始感觉到jQuery虽然很好用,但是维护起来不是很方便,就是所谓的开发一时爽,维护起来真要命。杂乱无章的代码混在一个文件中,想要寻找某个功能的代码很是困难,要是分开成多个文件引入,又会造成HTTP请求数过多的问题。

于是,我后来选择了Vue。

使用Vue之后的一个好处就是,我不再需要手动去操作DOM了,直接可以将JS变量放到HTML页面中,数据会自动绑定,这对于开发者来说非常方便,我们只需要把重点放到对数据的处理上就可以了,这样代码也精简了很多。

再后来,我发现有些代码在很多地方都要用到,同一个项目中,JS我可以通过定义方法来复用,CSS可以通过定义类名来复用,可是对于HTML,我却无能为力,只能通过复制粘贴的方式……

所以,我选择了Vue组件。

但是问题接着又来了,我发现Vue组件虽然解决了HTML的复用问题,但实际上只不过是将HTML和JS组合在了一起,CSS依然游离在外,在同一项目中确实都实现了复用,但是当其他项目要使用它时,还得把游离在外的CSS代码复制粘贴过去,这样久而久之自然也是难以忍受了。

幸运的是,单文件的Vue组件正好解决了这个问题。我们可以将HTML、CSS和JavaScript代码放在同一个.vue文件当中,强大的Webpack可以将这些代码分离出来,并分别与其他同类型的代码打包到一起。而我们不需要管Webpack内部是如何运作的,只需要知道单文件组件形式确实会为我们的工作带来极大的便利性。

在CSS方面,习惯使用Less来写CSS代码的我,明显体会到Less模块化所带来的便利性,一个Less文件可以通过引入其他多个Less文件,最后只需将这一个Less文件所编译成的CSS文件引入页面即可。之前我使用的Less编译工具一直都是koala,它是一个可视化的编译软件,可以进行Less代码的编译以及CSS和JS代码的压缩。正因为Less很好用,并且节省了HTTP请求数,然后我就在想,要是JS也能像Less一样模块化引入并且打包成一个JS文件就好了。

正因为有着组件化、模块化和单文件引入的强烈需求,我开始尝试寻找着同时具备这些功能的打包工具,而在尝试过Grunt、Gulp、Webpack和Parcel之后,最终我选择了Webpack。

那么,为什么我会在这些工具中最终选择Webpack呢?

首先,Grunt和Gulp只能算是构建工具,就是将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,同时还具备模块化开发和组件式开发等优点,在目前流行的前端框架React和Vue中也得到很好的支持。

然后再说说Parcel,它一度被人认为是未来最有可能替代Webpack的前端打包工具,主要原因是它几乎零配置,而且打包入口也不仅仅只是JS,另外其打包速度也要比Webpack快。然而,虽然Parcel相比Webpack似乎具有更多优势,但它毕竟还不够成熟,没有Webpack庞大的社区,一旦遇到问题很难在网上快速找到相应解决办法。并且最近Webpack 4.0已经发布,配置相比之前简化了一些,也增加了一些新功能,所以我们完全有理由相信Webpack在未来也会越来越好。

因此,在经过一番体验和对比之后,最终我选择了Webpack。

最后总结一下Webpack的主要优势:

① 模块化开发(import,require)
② 预处理(Less,Sass,ES6,TypeScript……)
③ 主流框架脚手架支持(Vue,React,Angular)
④ 庞大的社区(资源丰富,降低学习成本)

初识Webpack,如有不对之处,欢迎指正,也欢迎一起学习,一同进步!