使用 vue.js 開發(fā)大型應(yīng)用需要使用 webpack 打包工具，Webpack 可以將 js、css、png 等多種靜態(tài)資源進(jìn)行打包。

一、使用 webpack 的優(yōu)缺點(diǎn)？

1. 模塊化開發(fā)

   程序員在開發(fā)時可以分模塊創(chuàng)建不同的js、 css等小文件方便開發(fā)，最后使用webpack將這些小文件打包成一個文 件，減少了http的請求次數(shù)。

   webpack可以實現(xiàn)按需打包，為了避免出現(xiàn)打包文件過大可以打包成多個文件。

2. 編譯typescript、ES6等高級js語法

   隨著前端技術(shù)的強(qiáng)大，開發(fā)中可以使用javascript的很多高級版本，比如：typescript、ES6等，方便開發(fā)， webpack可以將打包文件轉(zhuǎn)換成瀏覽器可識別的js語法。

3. CSS預(yù)編譯

   webpack允許在開發(fā)中使用Sass 和 Less等原生CSS的擴(kuò)展技術(shù)，通過sass-loader、less-loader將Sass 和 Less的 語法編譯成瀏覽器可識別的css語法。

4. webpack的缺點(diǎn)

   1、配置有些繁瑣

   2、文檔不豐富

二、使用安裝 node.js ？

webpack 基于 node.js 運(yùn)行，首先需要安裝 node.js。

1. node.js 安裝(略)，需要配置環(huán)境變量。

   在命令提示符下輸入命令: node -v

2. 安裝NPM

   npm全稱Node Package Manager，他是node包管理和分發(fā)的工具，使用NPM可以對應(yīng)用的依賴進(jìn)行管理，NPM 的功能和服務(wù)端項目構(gòu)建工具maven差不多，我們通過npm 可以很方便地下載js庫，打包js文件。 node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當(dāng)前npm版本

3. 設(shè)置包路徑(包路徑就是npm從遠(yuǎn)程下載的js包所存放的路徑)

   使用 npm config ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑）。

   NPM 默認(rèn)的管理包路徑在 C:/用戶/[用戶名]/AppData/Roming/npm/node_meodules，為了方便對依賴包管理，我 們將管理包的路徑設(shè)置在單獨(dú)的地方，我將其安裝目錄設(shè)置在node.js的目錄下，創(chuàng)建npm_modules和 npm_cache，執(zhí)行下邊的命令：

   本教程安裝node.js在D:\Program Files\nodejs下所以執(zhí)行命令如下：

   npm config set prefix "C:\Program Files\nodejs\npm_modules"

   npm config set cache "c:\Program Files\nodejs\npm_cache"

   此時再使用 npm config ls 查詢NPM管理包路徑發(fā)現(xiàn)路徑已更改。

4. 安裝 cnpm

   npm默認(rèn)會去國外的鏡像去下載js包，在開發(fā)中通常我們使用國內(nèi)鏡像，這里我們使用淘寶鏡像 下邊我們來安裝cnpm： 有時我們使用npm下載資源會很慢，所以我們可以安裝一個cnmp(淘寶鏡像)來加快下載速度。

   輸入命令，進(jìn)行全局安裝淘寶鏡像 : npm install -g cnpm --registry=https://registry.npm.taobao.org。

   安裝后，我們可以使用以下命令來查看cnpm的版本：cnpm -v

   1.png

   nrm ls 查看鏡像已經(jīng)指向 taobao

   2.png

   使 nrm use XXX 切換鏡像，如果nrm沒有安裝則需要進(jìn)行全局安裝：cnpm install -g nrm

三、使用安裝 webpack ？

1. webpack安裝分為本地安裝和全局安裝

   本地安裝：僅將webpack安裝在當(dāng)前項目的node_modules目錄中，僅對當(dāng)前項目有效。

   全局安裝：將webpack安裝在本機(jī)，對所有項目有效，全局安裝會鎖定一個webpack版本，該版本可能不適用某個 項目。全局安裝需要添加 -g 參數(shù)。

2. 全局安裝加 -g

   全局安裝就將webpack的js包下載到npm的包路徑下。

   npm install webpack -g 或 cnpm install webpack -g

3. 安裝webpack指定的版本

   全局安裝：npm install webpack@3.6.0 -g 或 cnpm install webpack@3.6.0 -g

4. 在cmd狀態(tài)輸入webpack，出現(xiàn)如下提示說明 webpack安裝成功

   
   
   3.png