webpack-第01節：認識WebPack的做用

原文網址：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安裝到你的電腦上，再進行向下觀看，若是在安裝時遇到什麼問題，能夠在下方的留言區給我留