簡單講講我與前端的故事吧。

剛接觸前端時，所有靜態(tài)資源CSS、圖片和JS都是手動引入HTML頁面中，這并沒有什么不好，想要什么就引入什么嘛。另外，所見即所得，開發(fā)好的項目文件直接就可以上傳服務器，很方便，因此這樣的開發(fā)方式一直持續(xù)到前不久，也就是開始正式使用Webpack之前。

漸漸地，我開始感覺到jQuery雖然很好用，但是維護起來不是很方便，就是所謂的開發(fā)一時爽，維護起來真要命。雜亂無章的代碼混在一個文件中，想要尋找某個功能的代碼很是困難，要是分開成多個文件引入，又會造成HTTP請求數(shù)過多的問題。

于是，我后來選擇了Vue。

使用Vue之后的一個好處就是，我不再需要手動去操作DOM了，直接可以將JS變量放到HTML頁面中，數(shù)據(jù)會自動綁定，這對于開發(fā)者來說非常方便，我們只需要把重點放到對數(shù)據(jù)的處理上就可以了，這樣代碼也精簡了很多。

再后來，我發(fā)現(xiàn)有些代碼在很多地方都要用到，同一個項目中，JS我可以通過定義方法來復用，CSS可以通過定義類名來復用，可是對于HTML，我卻無能為力，只能通過復制粘貼的方式……

所以，我選擇了Vue組件。

但是問題接著又來了，我發(fā)現(xiàn)Vue組件雖然解決了HTML的復用問題，但實際上只不過是將HTML和JS組合在了一起，CSS依然游離在外，在同一項目中確實都實現(xiàn)了復用，但是當其他項目要使用它時，還得把游離在外的CSS代碼復制粘貼過去，這樣久而久之自然也是難以忍受了。

幸運的是，單文件的Vue組件正好解決了這個問題。我們可以將HTML、CSS和JavaScript代碼放在同一個.vue文件當中，強大的Webpack可以將這些代碼分離出來，并分別與其他同類型的代碼打包到一起。而我們不需要管Webpack內(nèi)部是如何運作的，只需要知道單文件組件形式確實會為我們的工作帶來極大的便利性。

在CSS方面，習慣使用Less來寫CSS代碼的我，明顯體會到Less模塊化所帶來的便利性，一個Less文件可以通過引入其他多個Less文件，最后只需將這一個Less文件所編譯成的CSS文件引入頁面即可。之前我使用的Less編譯工具一直都是koala，它是一個可視化的編譯軟件，可以進行Less代碼的編譯以及CSS和JS代碼的壓縮。正因為Less很好用，并且節(jié)省了HTTP請求數(shù)，然后我就在想，要是JS也能像Less一樣模塊化引入并且打包成一個JS文件就好了。

正因為有著組件化、模塊化和單文件引入的強烈需求，我開始嘗試尋找著同時具備這些功能的打包工具，而在嘗試過Grunt、Gulp、Webpack和Parcel之后，最終我選擇了Webpack。

那么，為什么我會在這些工具中最終選擇Webpack呢？

首先，Grunt和Gulp只能將一些CSS和JS文件分別壓縮合并成單個文件，當然也具有一些編譯功能，比如Less和Sass的編譯、ES6到ES5的編譯等等。但是Webpack不僅具有它們所具備的這些編譯壓縮合并功能，同時還具備模塊化開發(fā)和組件式開發(fā)等優(yōu)點，在目前流行的前端框架React和Vue中也得到很好的支持。

然后再說說Parcel，它一度被人認為是未來最有可能替代Webpack的前端打包工具，主要原因是它幾乎零配置，而且打包入口也不僅僅只是JS，另外其打包速度也要比Webpack快。然而，雖然Parcel相比Webpack似乎具有更多優(yōu)勢，但它畢竟還不夠成熟，沒有Webpack龐大的社區(qū)，一旦遇到問題很難在網(wǎng)上快速找到相應解決辦法。并且最近Webpack 4.0已經(jīng)發(fā)布，配置相比之前簡化了一些，也增加了一些新功能，所以我們完全有理由相信Webpack在未來也會越來越好。

因此，在經(jīng)過一番體驗和對比之后，最終我選擇了Webpack。

最后總結(jié)一下Webpack的主要優(yōu)勢：

① 模塊化開發(fā)（import，require）
② 預處理（Less，Sass，ES6，TypeScript……）
③ 主流框架腳手架支持（Vue，React，Angular）
④ 龐大的社區(qū)（資源豐富，降低學習成本）

初識Webpack，如有不對之處，歡迎指正，也歡迎一起學習，一同進步！