如果您已經(jīng)在前端行業(yè)中，WebPack在業(yè)界的流行程度自然必備多說(shuō)，成為了前端小白升級(jí)為前端工程師的必備技能。如果你對(duì)webpack還不夠熟悉，那你在前端前進(jìn)的腳步會(huì)受到阻礙，但是你幸運(yùn)的搜索到了這篇文章。（但是文章可能不會(huì)講解如何從1.0、2.0版本升級(jí)3.0版本的知識(shí)，而是直接講解3.0的知識(shí)，所以你可能需要有一個(gè)空杯心態(tài)來(lái)學(xué)習(xí)）
在學(xué)習(xí)過(guò)程中，我希望你能每節(jié)看完文章后，都可以自己親手做一做，如果你不作就不會(huì)出現(xiàn)錯(cuò)誤，不出現(xiàn)錯(cuò)誤，你就沒辦法增長(zhǎng)經(jīng)驗(yàn)，那你就什么都學(xué)不會(huì)。相信我，慢慢來(lái)，比較快。
前端為什么需要WebPack？
現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是SPA（single page web application 單頁(yè)應(yīng)用）技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決SCSS，Less……新增樣式的擴(kuò)展寫法的編譯工作。所以現(xiàn)代化的前端已經(jīng)完全依賴于WebPack的輔助了。
現(xiàn)在最流行的三個(gè)前端框架，可以說(shuō)和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。
React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
從此可以看出，無(wú)論你前端走那條線，你都要有很強(qiáng)的Webpack知識(shí)，才能祝你成為這個(gè)框架領(lǐng)域的大牛。
什么是WebPack？
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。
這段話有三個(gè)重點(diǎn)：
- 打包：可以把多個(gè)Javascript文件打包成一個(gè)文件，減少服務(wù)器壓力和下載帶寬。
- 轉(zhuǎn)換：把拓展語(yǔ)言轉(zhuǎn)換成為普通的JavaScript，讓瀏覽器順利運(yùn)行。
- 優(yōu)化：前端變的越來(lái)越復(fù)雜后，性能也會(huì)遇到問(wèn)題，而WebPack也開始肩負(fù)起了優(yōu)化和提升性能的責(zé)任。
我們可以從下圖再次了解一下WebPack的作用:
安裝WebPack
看了這么久，一定著急動(dòng)手作一作了。要使用WebPack就要先進(jìn)行安裝，就和你要使用微信，必須在手機(jī)上下載微信的APP一樣，但是不同的是WebPack的安裝，采用的是命令行npm形式的安裝。
這里我以windows系統(tǒng)為例，給大家做截圖示范。蘋果安裝稍有不同，不過(guò)大同小異
第一句是建立一個(gè)文件夾，第二句是進(jìn)入這個(gè)文件夾。這個(gè)文件夾就是我們的項(xiàng)目文件目錄了，文件夾建立好后，可以通過(guò)下面命令安裝WebPack。
需要注意的是,你在執(zhí)行下一步時(shí)必須安裝node，可以通過(guò) node -v來(lái)查看node安裝情況和版本，如果沒有安裝，要先安裝node才可以繼續(xù)進(jìn)行。
對(duì)項(xiàng)目目錄進(jìn)行安裝
全局安裝完成后，我們還要進(jìn)行一個(gè)項(xiàng)目目錄的安裝。在用npm安裝前，我們先要進(jìn)行一下初始化，初始化的主要目的是生成package.json文件（這是一個(gè)標(biāo)準(zhǔn)的npm說(shuō)明文件，里面蘊(yùn)含了豐富的信息，包括當(dāng)前項(xiàng)目的依賴模塊，自定義的腳本任務(wù)等等，如果你對(duì)此文件還不了解，可以看看node 的相關(guān)知識(shí)）。
在命令行輸入：
npm init
輸入完成后，npm終端會(huì)問(wèn)你關(guān)于項(xiàng)目的名稱，描述……一堆內(nèi)容，如果你不考慮發(fā)布到npm上，這些內(nèi)容都不重要，而且我們后期還可以用文本的形式修改這些內(nèi)容。現(xiàn)在我們只要一路回車就完成了初始化。這時(shí)用dir命令已經(jīng)可以看到生成的package.json文件了。
輸入下面命令進(jìn)行項(xiàng)目目錄的安裝：
這里的參數(shù)–save是要保存到package.json中，dev是在開發(fā)時(shí)使用這個(gè)包，而生產(chǎn)環(huán)境中不使用。
開發(fā)環(huán)境and生產(chǎn)環(huán)境：
開發(fā)環(huán)境：在開發(fā)時(shí)需要的環(huán)境，這里指在開發(fā)時(shí)需要依賴的包。
生產(chǎn)環(huán)境：程序開發(fā)完成，開始運(yùn)行后的環(huán)境，這里指要使項(xiàng)目運(yùn)行，所需要的依賴包。
查看webpack版本
你安裝好后，會(huì)想知道你現(xiàn)在webpack版本，在工作中交流時(shí)，也會(huì)經(jīng)常問(wèn)到你，你的打包版本是什么？這時(shí)候我們可以用下面的命令進(jìn)行查看。
以看到我現(xiàn)在的版本的3.6.0版本，這是目前（2017/9/16）最新的版本了。出現(xiàn)了版本號(hào)，也說(shuō)明你的webpack安裝成功了。
