- webpack實踐之路（一）：安裝
- webpack實踐之路（二）：快速上手的Demo
- webpack實踐之路（三）：快速上手的Demo2.0
- webpack實踐之路（四）：管理資源
- webpack實踐之路（五）：管理輸出
- webpack實踐之路（六）：讓開發更便捷
- webpack實踐之路（七）：模塊熱替換HMR
一、什麼是WebPack？
WebPack可以看做是模塊打包機：它會分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。現在Webpack還肩負起了優化項目的責任。
上面的話有三個重點：
- 打包：可以把多個Javascript文件打包成一個文件，減少服務器壓力和下載帶寬。
- 轉換：把拓展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。
- 優化：前端變的越來越複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任
我們可以從下圖再次瞭解一下WebPack的作用:
二、安裝WebPack
注：我用的是linux，由於權限問題，所以很多命令前加上了sudo
1、全局安裝webpack
打開終端，創建 文件夾webpack_demo
> mkdir webpack_demo
> cd webpack_demo
需要注意的是,你在執行下一步時必須安裝node，可以通過 node -v來查看node安裝情況和版本，如果沒有安裝，要先安裝node纔可以繼續進行。
//全局安裝
> sudo npm install -g webpack
如果你這時安裝失敗了（出現了報錯信息），一般有三種可能：
- 檢查你node的版本號，如果版本號過低，升級爲最新版本。
- 網絡問題，可以考慮使用cnpm來安裝（這個是淘寶實時更新的鏡像）,具體可以登錄cnpm的官方網站學習http://npm.taobao.org/
- 權限問題，在Liux、Mac安裝是需要權限，如果你是Windows系統，主要要使用以管理員方式安裝。
注意：全局安裝是可以的，但是webpack官方是不推薦的。這會將您項目中的 webpack 鎖定到指定版本，並且在使用不同的 webpack 版本的項目中，可能會導致構建失敗。
2、對項目目錄進行安裝
全局安裝完成後，我們還要進行一個項目目錄的安裝。在用npm安裝前，我們先要進行一下初始化，初始化的主要目的是生成package.json文件
(package.json包括當前項目的依賴模塊，自定義的腳本任務等等）
在終端輸入如下，進行初始化：
> sudo npm init
輸入完成後，npm終端會問你關於項目的名稱，描述……一堆內容，如果你不考慮發佈到npm上，這些內容都不重要，而且我們後期還可以用文本的形式修改這些內容。現在我們只要一路回車就完成了初始化。這時用dir命令已經可以看到生成的package.json文件了。
再進行項目目錄的安裝：
> sudo npm install --save-dev webpack
參數–save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。
我們使用的是 webpack 4+ 版本，所以還需要安裝 CLI：
> sudo npm install --save-dev webpack-cli
開發環境 與 生產環境：
- 開發環境：在開發時需要的環境，這裏指在開發時需要依賴的包。
- 生產環境：程序開發完成，開始運行後的環境，這裏指要使項目運行，所需要的依賴包。
3、查看webpack版本
我們用下面命令查看webpack版本:
> npm info webpack //所有詳細信息
或
> webpack -v //僅版本信息
通過下圖看到，當前webpack版本爲 4.27.1
總結
（1）如果你想全局安裝，那就按上面：
先全局安裝 --> 再初始化init --> 再本地目錄(局部)安裝
> sudo npm install -g webpack
> sudo npm init
> sudo npm install --save-dev webpack
> sudo npm install --save-dev webpack-cli
（2）如果你只想本地安裝：（推薦）
> npm init -y
> sudo npm install webpack webpack-cli --save-dev