初識 webpack

前端爲何須要WebPack？

如今的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行後，JavaScript的複雜度增長和須要一大堆依賴包，還須要解決SCSS，Less……新增樣式的擴展寫法的編譯工做。因此現代化的前端已經徹底依賴於WebPack的輔助了。

如今最流行的三個前端框架，能夠說和webpack已經緊密相連，框架官方都推出了和自身框架依賴的webpack構建工具。

• React.js+WebPack
• Vue.js+WebPack
• Angluar+WebPack

今後能夠看出，不管你前端走那條線，你都要有很強的Webpack知識，才能祝你成爲這個框架領域的大牛。

什麼是WebPack？

WebPack能夠看作是模塊打包機：它作的事情是：分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了優化項目的責任。

這段話有三個重點：

• 打包：能夠把多個Javascript文件打包成一個文件，減小服務器壓力和下載帶寬。
• 轉換：把拓展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。
• 優化：前端變的愈來愈複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化和提高性能的責任。

咱們能夠從下圖再次瞭解一下WebPack的做用:

安裝WebPack

具體安裝方法：

用win+R打開運行對話框，輸入cmd進入命令行模式。而後找到你想開始項目的地方，輸入下方代碼：

mkdir webpack_demo
cd webpack_demo

第一句是創建一個文件夾，第二句是進入這個文件夾。這個文件夾就是咱們的項目文件目錄了，文件夾創建好後，能夠經過下面命令安裝WebPack。

須要注意的是,你在執行下一步時必須安裝node，能夠經過 node -v來查看node安裝狀況和版本，若是沒有安裝，要先安裝node才能夠繼續進行。

//全局安裝
npm install -g webpack

項目目錄

全局安裝完成後，咱們還要進行一個項目目錄的安裝。在用npm安裝前，咱們先要進行一下初始化，初始化的主要目的是生成package.json文件（這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等，若是你對此文件還不瞭解，能夠看看node 的相關知識）。

在命令行輸入：

npm init

輸入完成後，npm終端會問你關於項目的名稱，描述……一堆內容，若是你不考慮發佈到npm上，這些內容都不重要，並且咱們後期還能夠用文本的形式修改這些內容。如今咱們只要一路回車就完成了初始化。這時用dir命令已經能夠看到生成的package.json文件了。

輸入下面命令進行項目目錄的安裝：

npm install --save-dev webpack

這裏的參數–-save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。

開發環境and生產環境：

開發環境：--save-dev 在開發時須要的環境，這裏指在開發時須要依賴的包。
生產環境：--save 程序開發完成，開始運行後的環境，這裏指要使項目運行，所須要的依賴包。

查看webpack版本

安裝好後，會想知道你如今webpack版本，在工做中交流時，也會常常問到你，你的打包版本是什麼？這時候咱們能夠用下面的命令進行查看。

webpack -v

出現了版本號，說明你的webpack安裝成功了。