使用 vue.js 開發(fā)大型應(yīng)用需要使用 webpack 打包工具，Webpack 可以將 js版仔、css包券、png 等多種靜態(tài)資源進(jìn)行打包首妖。
一娜庇、使用 webpack 的優(yōu)缺點(diǎn)塔次？
-
模塊化開發(fā)
程序員在開發(fā)時(shí)可以分模塊創(chuàng)建不同的js、 css等小文件方便開發(fā)名秀，最后使用webpack將這些小文件打包成一個(gè)文 件励负，減少了http的請(qǐng)求次數(shù)。
webpack可以實(shí)現(xiàn)按需打包泰偿，為了避免出現(xiàn)打包文件過大可以打包成多個(gè)文件熄守。
-
編譯typescript蜈垮、ES6等高級(jí)js語法
隨著前端技術(shù)的強(qiáng)大耗跛，開發(fā)中可以使用javascript的很多高級(jí)版本，比如：typescript攒发、ES6等调塌，方便開發(fā)， webpack可以將打包文件轉(zhuǎn)換成瀏覽器可識(shí)別的js語法惠猿。
-
CSS預(yù)編譯
webpack允許在開發(fā)中使用Sass 和 Less等原生CSS的擴(kuò)展技術(shù)羔砾，通過sass-loader、less-loader將Sass 和 Less的 語法編譯成瀏覽器可識(shí)別的css語法偶妖。
-
webpack的缺點(diǎn)
1姜凄、配置有些繁瑣
2、文檔不豐富
二趾访、使用安裝 node.js 态秧？
webpack 基于 node.js 運(yùn)行，首先需要安裝 node.js扼鞋。
-
node.js 安裝(略)申鱼，需要配置環(huán)境變量。
在命令提示符下輸入命令: node -v
-
安裝NPM
npm全稱Node Package Manager云头，他是node包管理和分發(fā)的工具捐友，使用NPM可以對(duì)應(yīng)用的依賴進(jìn)行管理，NPM 的功能和服務(wù)端項(xiàng)目構(gòu)建工具maven差不多溃槐，我們通過npm 可以很方便地下載js庫匣砖，打包js文件。 node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當(dāng)前npm版本
-
設(shè)置包路徑(包路徑就是npm從遠(yuǎn)程下載的js包所存放的路徑)
使用 npm config ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑）猴鲫。
NPM 默認(rèn)的管理包路徑在 C:/用戶/[用戶名]/AppData/Roming/npm/node_meodules砌溺，為了方便對(duì)依賴包管理，我 們將管理包的路徑設(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"
此時(shí)再使用 npm config ls 查詢NPM管理包路徑發(fā)現(xiàn)路徑已更改匣缘。
-
安裝 cnpm
npm默認(rèn)會(huì)去國(guó)外的鏡像去下載js包猖闪，在開發(fā)中通常我們使用國(guó)內(nèi)鏡像，這里我們使用淘寶鏡像 下邊我們來安裝cnpm： 有時(shí)我們使用npm下載資源會(huì)很慢肌厨，所以我們可以安裝一個(gè)cnmp(淘寶鏡像)來加快下載速度培慌。
輸入命令，進(jìn)行全局安裝淘寶鏡像 : npm install -g cnpm --registry=https://registry.npm.taobao.org柑爸。
安裝后吵护，我們可以使用以下命令來查看cnpm的版本：cnpm -v
1.pngnrm ls 查看鏡像已經(jīng)指向 taobao
2.png使 nrm use XXX 切換鏡像，如果nrm沒有安裝則需要進(jìn)行全局安裝：cnpm install -g nrm
三表鳍、使用安裝 webpack 馅而？
-
webpack安裝分為本地安裝和全局安裝
本地安裝：僅將webpack安裝在當(dāng)前項(xiàng)目的node_modules目錄中，僅對(duì)當(dāng)前項(xiàng)目有效譬圣。
全局安裝：將webpack安裝在本機(jī)瓮恭，對(duì)所有項(xiàng)目有效，全局安裝會(huì)鎖定一個(gè)webpack版本厘熟，該版本可能不適用某個(gè) 項(xiàng)目屯蹦。全局安裝需要添加 -g 參數(shù)。
-
全局安裝加 -g
全局安裝就將webpack的js包下載到npm的包路徑下绳姨。
npm install webpack -g 或 cnpm install webpack -g
-
安裝webpack指定的版本
全局安裝：npm install webpack@3.6.0 -g 或 cnpm install webpack@3.6.0 -g
-
在cmd狀態(tài)輸入webpack登澜，出現(xiàn)如下提示說明 webpack安裝成功
3.png
