簡單講講我與前端的故事吧驻售。
剛接觸前端時(shí)露久，所有靜態(tài)資源CSS、圖片和JS都是手動(dòng)引入HTML頁面中欺栗，這并沒有什么不好毫痕，想要什么就引入什么嘛。另外迟几，所見即所得消请，開發(fā)好的項(xiàng)目文件直接就可以上傳服務(wù)器，很方便类腮，因此這樣的開發(fā)方式一直持續(xù)到前不久臊泰，也就是開始正式使用Webpack之前。
漸漸地蚜枢，我開始感覺到j(luò)Query雖然很好用缸逃，但是維護(hù)起來不是很方便针饥，就是所謂的開發(fā)一時(shí)爽，維護(hù)起來真要命需频。雜亂無章的代碼混在一個(gè)文件中丁眼，想要尋找某個(gè)功能的代碼很是困難，要是分開成多個(gè)文件引入昭殉，又會(huì)造成HTTP請(qǐng)求數(shù)過多的問題苞七。
于是，我后來選擇了Vue挪丢。
使用Vue之后的一個(gè)好處就是莽鸭，我不再需要手動(dòng)去操作DOM了，直接可以將JS變量放到HTML頁面中吃靠，數(shù)據(jù)會(huì)自動(dòng)綁定硫眨，這對(duì)于開發(fā)者來說非常方便，我們只需要把重點(diǎn)放到對(duì)數(shù)據(jù)的處理上就可以了巢块，這樣代碼也精簡了很多礁阁。
再后來，我發(fā)現(xiàn)有些代碼在很多地方都要用到族奢，同一個(gè)項(xiàng)目中姥闭，JS我可以通過定義方法來復(fù)用，CSS可以通過定義類名來復(fù)用越走，可是對(duì)于HTML棚品，我卻無能為力，只能通過復(fù)制粘貼的方式……
所以廊敌，我選擇了Vue組件铜跑。
但是問題接著又來了，我發(fā)現(xiàn)Vue組件雖然解決了HTML的復(fù)用問題骡澈，但實(shí)際上只不過是將HTML和JS組合在了一起锅纺，CSS依然游離在外，在同一項(xiàng)目中確實(shí)都實(shí)現(xiàn)了復(fù)用肋殴，但是當(dāng)其他項(xiàng)目要使用它時(shí)囤锉，還得把游離在外的CSS代碼復(fù)制粘貼過去，這樣久而久之自然也是難以忍受了护锤。
幸運(yùn)的是官地，單文件的Vue組件正好解決了這個(gè)問題。我們可以將HTML烙懦、CSS和JavaScript代碼放在同一個(gè).vue文件當(dāng)中驱入，強(qiáng)大的Webpack可以將這些代碼分離出來，并分別與其他同類型的代碼打包到一起。而我們不需要管Webpack內(nèi)部是如何運(yùn)作的沧侥，只需要知道單文件組件形式確實(shí)會(huì)為我們的工作帶來極大的便利性可霎。
在CSS方面魄鸦，習(xí)慣使用Less來寫CSS代碼的我宴杀，明顯體會(huì)到Less模塊化所帶來的便利性，一個(gè)Less文件可以通過引入其他多個(gè)Less文件拾因，最后只需將這一個(gè)Less文件所編譯成的CSS文件引入頁面即可旺罢。之前我使用的Less編譯工具一直都是koala，它是一個(gè)可視化的編譯軟件绢记，可以進(jìn)行Less代碼的編譯以及CSS和JS代碼的壓縮扁达。正因?yàn)長ess很好用，并且節(jié)省了HTTP請(qǐng)求數(shù)蠢熄，然后我就在想跪解，要是JS也能像Less一樣模塊化引入并且打包成一個(gè)JS文件就好了。
正因?yàn)橛兄M件化签孔、模塊化和單文件引入的強(qiáng)烈需求叉讥，我開始嘗試尋找著同時(shí)具備這些功能的打包工具，而在嘗試過Grunt饥追、Gulp图仓、Webpack和Parcel之后，最終我選擇了Webpack但绕。
那么救崔，為什么我會(huì)在這些工具中最終選擇Webpack呢？
首先捏顺，Grunt和Gulp只能將一些CSS和JS文件分別壓縮合并成單個(gè)文件六孵，當(dāng)然也具有一些編譯功能，比如Less和Sass的編譯幅骄、ES6到ES5的編譯等等狸臣。但是Webpack不僅具有它們所具備的這些編譯壓縮合并功能，同時(shí)還具備模塊化開發(fā)和組件式開發(fā)等優(yōu)點(diǎn)昌执，在目前流行的前端框架React和Vue中也得到很好的支持烛亦。
然后再說說Parcel，它一度被人認(rèn)為是未來最有可能替代Webpack的前端打包工具懂拾，主要原因是它幾乎零配置煤禽，而且打包入口也不僅僅只是JS，另外其打包速度也要比Webpack快岖赋。然而檬果，雖然Parcel相比Webpack似乎具有更多優(yōu)勢(shì)，但它畢竟還不夠成熟，沒有Webpack龐大的社區(qū)选脊，一旦遇到問題很難在網(wǎng)上快速找到相應(yīng)解決辦法杭抠。并且最近Webpack 4.0已經(jīng)發(fā)布，配置相比之前簡化了一些恳啥，也增加了一些新功能偏灿，所以我們完全有理由相信Webpack在未來也會(huì)越來越好。
因此钝的，在經(jīng)過一番體驗(yàn)和對(duì)比之后翁垂，最終我選擇了Webpack。
最后總結(jié)一下Webpack的主要優(yōu)勢(shì)：
① 模塊化開發(fā)（import硝桩，require）
② 預(yù)處理（Less沿猜，Sass，ES6碗脊，TypeScript……）
③ 主流框架腳手架支持（Vue啼肩，React，Angular）
④ 龐大的社區(qū)（資源豐富衙伶，降低學(xué)習(xí)成本）
初識(shí)Webpack祈坠，如有不對(duì)之處，歡迎指正痕支，也歡迎一起學(xué)習(xí)颁虐，一同進(jìn)步！
