Webpack及npm介紹安裝

Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模組進行打包

從圖中我們可以看出，Webpack 可以將js、css、png等多種靜態資源 進行打包，使用webpack有什麼好處呢？
1、模組化開發
程式設計師在開發時可以分模組建立不同的js、 css等小檔案方便開發，最後使用webpack將這些小檔案打包成一個文
件，減少了http的請求次數。
webpack可以實現按需打包，為了避免出現打包檔案過大可以打包成多個檔案。
2、 編譯typescript、ES6等高階js語法
隨著前端技術的強大，開發中可以使用javascript的很多高階版本，比如：typescript、ES6等，方便開發，
webpack可以將打包檔案轉換成瀏覽器可識別的js語法。
3、CSS預編譯
webpack允許在開發中使用Sass 和 Less等原生CSS的擴充套件技術，透過sass-loader、less-loader將Sass 和 Less的
語法編譯成瀏覽器可識別的css語法。
webpack的缺點：
1、配置有些繁瑣
2、文件不豐富

安裝Webpack

Webpack基於nodejs執行所以先要先安裝node
1.3.2.1 安裝Node.js
為什麼會有node.js？
傳統意義上的 JavaScript 執行在瀏覽器上，Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一個執行在服務端
的框架，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務端的程式，這樣也就實現了用
javaScript去開發 Apache + PHP 以及 Java Servlet所開發的服務端功能，這樣做的好處就是前端和後端都採用
javascript，即開發一份js程式即可以執行在前端也可以執行的服務端，這樣比一個應用使用多種語言在開發效率上
要高，不過node.js屬於新興產品，一些公司也在嘗試使用node.js完成一些業務領域，node.js基於V8引擎，基於
事件驅動機制，在特定領域效能出色，比如用node.js實現訊息推送、狀態監控等的業務功能非常合適。
下邊我們去安裝Node.js：
1、下載對應你係統的Node.js版本:

2.也可使用nvm管理node

nvm ls顯示所有node版本
nvm install stable/6 指定安裝node版本
nvm use 6 使用某個版本 node

2.node ‐v 顯示版本

1.3.2.2 安裝NPM
1、自動安裝NPM
npm全稱Node Package Manager，他是node包管理和分發的工具，使用NPM可以對應用的依賴進行管理，NPM
的功能和服務端專案構建工具maven差不多，我們透過npm 可以很方便地下載js庫，打包js檔案。
node.js已經整合了npm工具，在命令提示符輸入 npm -v 可檢視當前npm版本

2.設定下載的資源包路徑

npm config set prefix "D:Program Filesnodejs
npm config set cache "D:Program Filesnodejsnpm_cache

注意 D:Program Filesnodejs 到這裡就行不要使用D:Program Filesnodejsnpm_models 無法識別

npm config ls檢視npm配置

3.使用tnpm 國內淘寶映象提高下載速度

npm install -g cnpm --registry=

cnpm -v 檢視下載的版本

4.安裝 nrm 切換映象

cnpm install -g nrm 安裝nrm

nrm ls 顯示映象
nrm use taobao 使用淘寶映象

5.安裝 webpack
cnpm install -g webpack 安裝
檢視版本
webpack

使用Webpack

筆記小結