原文網址：http://jspang.com/2017/09/16/webpack3-2/
如果您已經在前端行業中，WebPack在業界的流行程度自然必備多說，成為了前端小白升級為前端工程師的必備技能。如果你對webpack還不夠熟悉，那你在前端前進的腳步會受到阻礙，但是你幸運的搜索到了這篇文章。（但是文章可能不會講解如何從1.0、2.0版本升級3.0版本的知識，而是直接講解3.0的知識，所以你可能需要有一個空杯心態來學習）
在學習過程中，我希望你能每節看完文章后，都可以自己親手做一做，如果你不作就不會出現錯誤，不出現錯誤，你就沒辦法增長經驗，那你就什么都學不會。相信我，慢慢來，比較快。
前端為什么需要WebPack？
現在的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行后，JavaScript的復雜度增加和需要一大堆依賴包，還需要解決SCSS，Less……新增樣式的擴展寫法的編譯工作。所以現代化的前端已經完全依賴於WebPack的輔助了。
現在最流行的三個前端框架，可以說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。
- React.js+WebPack
- Vue.js+WebPack
- AngluarJS+WebPack
從此可以看出，無論你前端走那條線，你都要有很強的Webpack知識，才能祝你成為這個框架領域的大牛。
什么是WebPack？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現后，Webpack還肩負起了優化項目的責任。
這段話有三個重點：
- 打包：可以把多個Javascript文件打包成一個文件，減少服務器壓力和下載帶寬。
- 轉換：把拓展語言轉換成為普通的JavaScript，讓瀏覽器順利運行。
- 優化：前端變的越來越復雜后，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任。
我們可以從下圖再次了解一下WebPack的作用:
安裝WebPack
看了這么久，一定着急動手作一作了。要使用WebPack就要先進行安裝，就和你要使用微信，必須在手機上下載微信的APP一樣，但是不同的是WebPack的安裝，采用的是命令行npm形式的安裝。
這里我以windows系統為例，給大家做截圖示范。蘋果安裝稍有不同，不過大同小異（如果有問題，可以直接進群交流，進群方法看文章開頭）。
具體安裝方法：
用win+R打開運行對話框，輸入cmd進入命令行模式。然后找到你想開始項目的地方，輸入下方代碼：
|
1
2
|
mkdir webpack_demo
cd webpack_demo
|
第一句是建立一個文件夾，第二句是進入這個文件夾。這個文件夾就是我們的項目文件目錄了，文件夾建立好后，可以通過下面命令安裝WebPack。
需要注意的是,你在執行下一步時必須安裝node，可以通過 node -v來查看node安裝情況和版本，如果沒有安裝，要先安裝node才可以繼續進行。
|
1
2
|
//全局安裝
npm install -g webpack
|
如果你這時安裝失敗了（出現了報錯信息），一般有三種可能：
- 檢查你node的版本號，如果版本號過低，升級為最新版本。
- 網絡問題，可以考慮使用cnpm來安裝（這個是淘寶實時更新的鏡像）,具體可以登錄cnpm的官方網站學習http://npm.taobao.org/。
- 權限問題，在Liux、Mac安裝是需要權限，如果你是Windows系統，主要要使用以管理員方式安裝。請在命令前加sudo 即可
注意：全局安裝是可以的，但是webpack官方是不推薦的。這會將您項目中的 webpack 鎖定到指定版本，並且在使用不同的 webpack 版本的項目中，可能會導致構建失敗。
對項目目錄進行安裝
全局安裝完成后，我們還要進行一個項目目錄的安裝。在用npm安裝前，我們先要進行一下初始化，初始化的主要目的是生成package.json文件（這是一個標准的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等，如果你對此文件還不了解，可以看看node 的相關知識）。
在命令行輸入：
|
1
|
npm init
|
輸入完成后，npm終端會問你關於項目的名稱，描述……一堆內容，如果你不考慮發布到npm上，這些內容都不重要，而且我們后期還可以用文本的形式修改這些內容。現在我們只要一路回車就完成了初始化。這時用dir命令已經可以看到生成的package.json文件了。
輸入下面命令進行項目目錄的安裝：
|
1
|
npm install --save-dev webpack
|
這里的參數–save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。
開發環境and生產環境：
- 開發環境：在開發時需要的環境，這里指在開發時需要依賴的包。
- 生產環境：程序開發完成，開始運行后的環境，這里指要使項目運行，所需要的依賴包。
查看webpack版本
你安裝好后，會想知道你現在webpack版本，在工作中交流時，也會經常問到你，你的打包版本是什么？這時候我們可以用下面的命令進行查看。
|
1
|
webpack -v
|
可以看到我現在的版本的3.6.0版本，這是目前（2017/9/16）最新的版本了。出現了版本號，也說明你的webpack安裝成功了。
看到這里，我們第一節的內容就完成了，我建議你停一下，把webpack安裝到你的電腦上，再進行向下觀看，如果在安裝時遇到什么問題，可以在下方的留言區給我留