1.WebPack概念
一、什么是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的安裝包
以上純屬個人理解,如有錯誤,希望指正!
知其然,而后知其所以然。






浙公網安備 33010602011771號