一、什么是WebPack

官方解釋：本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

我的解釋：把各種相同文件的類型，根據模塊依賴關系（你自己顯示聲明的(Ex:import… require…)）自動打包成一個單獨的文件。

二、為什么需要WebPack

1.讓你無須處理JS依賴關系，像以前，你必須注意引用的JS文件是否依賴其他JS文件，如果依賴，則必須手動處理他們的聲明順序。因為在JS文件代碼中不能顯示引入另一個JS文件。

2.減少網絡請求，像以前，會聲明很多JS引用，造成多次請求文件。與WebPack相比，雖然最后得到的總文件體積沒有改變多少，但由于WebPack把所需要的JS打包成了一個單獨的文件，網絡請求只有一次，所以訪問網頁速度相對來說速度較快。

三、WebPack環境搭建

1.Node.js

（1） 什么是Node.js

           官方解釋：Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行時。

           我的解釋：Node.js就是一個Javascript的運行環境。和CLR、JVM有一點點類似。并且Node.js提供了Javascript的最新語法支持，具有面向對象的功能，因為把JS當做后端語言來用這是非常必要的。

（2） Node.js與WebPack的關系

          WebPack是基于Node.js開發的，所以安裝WebPack必須首先安裝Node.js，Node.js去官網下載安裝即可。npm是一個Node.s的包管理器，當你安裝完成后，在命令行中輸入npm –v 可以看到當前安裝的版本，如下圖所示：

2.本地安裝與全局安裝的區別

本地安裝就是安裝在你的項目目錄下，因為沒有設置環境變量，所以你必須要在BIN目錄下去啟動WebPack。全局安裝就是安裝在一個固定的地方，并且設置了系統的環境變量，以免除你輸入一大堆路徑的困擾。

3.本地安裝

使用Node.js自帶的包管理器npm來安裝，用命令行工具進入到你的所在目錄下，輸入

npm install webpack

會產生以下文件

WebPack所在目錄

4.全局安裝

npm install webpack –g

先查看系統環境變量

找到npm所在的目錄，可以發現WebPack的安裝包

以上純屬個人理解，如有錯誤，希望指正！