webpack3.0+學習一

什麼是WebPack？

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

這段話有三個重點：

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

 

安裝WebPack

具體安裝方法：

用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系統，主要要使用以管理員方式安裝。

注意：全局安裝是能夠的，可是webpack官方是不推薦的。這會將您項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中，可能會致使構建失敗。

2.初始化項目

初始化package.json

npm init -y

package.json 文件中

1.  
   "scripts": {
2.  
   "build": "webpack --profile --progress --colors --display-error-details",
3.  
   "dev": "webpack --display-modules --profile --progress --colors --display-error-details"
4.  
   },

color 輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟

profile 輸出性能數據，能夠看到每一步的耗時

progress 輸出當前編譯的進度，以百分比的形式呈現

display-modules 默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊

display-error-details 輸出詳細的錯誤信息

---

全局安裝

npm install webpack -g

本地安裝

npm install webpack webpack-cli -D//-D是指開發環境須要，上線不須要，下同

通常推薦本地安裝，安裝在本身的項目中，否則版本不一樣會有不兼容。