我为什么要使用Webpack?

Posted 2021-04-29 前端微站

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

刚接触前端时，所有静态资源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，如有不对之处，欢迎指正，也欢迎一起学习，一同进步！