1 webpack介紹
使用vue.js開發(fā)大型應(yīng)用需要使用webpack打包工具溢豆，Webpack 是一個(gè)前端資源的打包工具，它可以將js蜡秽、image府阀、css等資源當(dāng)成一個(gè)模塊進(jìn)行打包。
從圖中我們可以看出芽突，Webpack 可以將js试浙、css、png等多種靜態(tài)資源 進(jìn)行打包寞蚌，使用webpack有什么好處呢田巴？
1、模塊化開發(fā)
程序員在開發(fā)時(shí)可以分模塊創(chuàng)建不同的js挟秤、 css等小文件方便開發(fā)壹哺，最后使用webpack將這些小文件打包成一個(gè)文件，減少了http的請(qǐng)求次數(shù)艘刚。
webpack可以實(shí)現(xiàn)按需打包管宵，為了避免出現(xiàn)打包文件過(guò)大可以打包成多個(gè)文件。
2、 編譯typescript箩朴、ES6等高級(jí)js語(yǔ)法
隨著前端技術(shù)的強(qiáng)大岗喉，開發(fā)中可以使用javascript的很多高級(jí)版本，比如：typescript炸庞、ES6等钱床，方便開發(fā)，
webpack可以將打包文件轉(zhuǎn)換成瀏覽器可識(shí)別的js語(yǔ)法燕雁。
3诞丽、CSS預(yù)編譯
webpack允許在開發(fā)中使用Sass 和 Less等原生CSS的擴(kuò)展技術(shù)鲸拥，通過(guò)sass-loader拐格、less-loader將Sass 和 Less的語(yǔ)法編譯成瀏覽器可識(shí)別的css語(yǔ)法。
webpack的缺點(diǎn)：
1刑赶、配置有些繁瑣
2捏浊、文檔不豐富
1.1安裝webpack
1.1.2 安裝Node.js
webpack基于node.js運(yùn)行，首先需要安裝node.js撞叨。
為什么會(huì)有node.js金踪？
傳統(tǒng)意義上的 JavaScript 運(yùn)行在瀏覽器上，Chrome 使用的 JavaScript 引擎是 V8牵敷，Node.js 是一個(gè)運(yùn)行在服務(wù)端的框架胡岔，它的底層就使用了 V8 引擎，這樣就可以使用javascript去編寫一些服務(wù)端的程序枷餐，這樣也就實(shí)現(xiàn)了用javaScript去開發(fā) Apache + PHP 以及 Java Servlet所開發(fā)的服務(wù)端功能靶瘸，這樣做的好處就是前端和后端都采用javascript，即開發(fā)一份js程序即可以運(yùn)行在前端也可以運(yùn)行的服務(wù)端毛肋，這樣比一個(gè)應(yīng)用使用多種語(yǔ)言在開發(fā)效率上要高怨咪，不過(guò)node.js屬于新興產(chǎn)品，一些公司也在嘗試使用node.js完成一些業(yè)務(wù)領(lǐng)域润匙，node.js基于V8引擎诗眨，基于事件驅(qū)動(dòng)機(jī)制，在特定領(lǐng)域性能出色孕讳，比如用node.js實(shí)現(xiàn)消息推送匠楚、狀態(tài)監(jiān)控等的業(yè)務(wù)功能非常合適。
下邊我們?nèi)グ惭bNode.js：
1厂财、下載對(duì)應(yīng)你系統(tǒng)的Node.js版本:
https://nodejs.org/en/downloa
2芋簿、選安裝目錄進(jìn)行安裝
默認(rèn)即可
安裝完成檢查PATH環(huán)境變量是否設(shè)置了node.js的路徑。
3蟀苛、測(cè)試
在命令提示符下輸入命令
node ‐v會(huì)顯示當(dāng)前node的版本
1.1.3 安裝NPM（記得環(huán)境變量哦重點(diǎn)）
1益咬、自動(dòng)安裝NPM
npm全稱Node Package Manager，他是node包管理和分發(fā)的工具，使用NPM可以對(duì)應(yīng)用的依賴進(jìn)行管理幽告，NPM的功能和服務(wù)端項(xiàng)目構(gòu)建工具maven差不多梅鹦，我們通過(guò)npm 可以很方便地下載js庫(kù)，打包js文件冗锁。
node.js已經(jīng)集成了npm工具齐唆，在命令提示符輸入 npm -v 可查看當(dāng)前npm版本
2、設(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:\develop\node.js\js下所以執(zhí)行命令如下：
npm config set prefix "D:\develop\node.js\npm_modules"（要自己創(chuàng)建這個(gè)目錄）
npm config set cache "D:\develop\node.js\npm_cache"
此時(shí)再使用 npm config ls 查詢NPM管理包路徑發(fā)現(xiàn)路徑已更改
3擂错、安裝cnpm
npm默認(rèn)會(huì)去國(guó)外的鏡像去下載js包味滞，在開發(fā)中通常我們使用國(guó)內(nèi)鏡像，這里我們使用淘寶鏡像
下邊我們來(lái)安裝cnpm：
有時(shí)我們使用npm下載資源會(huì)很慢钮呀，所以我們可以安裝一個(gè)cnmp(淘寶鏡像)來(lái)加快下載速度剑鞍。
輸入命令，進(jìn)行全局安裝淘寶鏡像爽醋。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝后蚁署，我們可以使用以下命令來(lái)查看cnpm的版本
cnpm -v
nrm ls 查看鏡像已經(jīng)指向taobao
使nrm use XXX切換 鏡像
如果nrm沒(méi)有安裝則需要進(jìn)行全局安裝：cnpm install -g nrm
1.1.4 安裝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ù)。
新建webpack進(jìn)入目錄
npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安裝webpack-cli)
2）全局安裝加-g解愤，如下：
全局安裝就將webpack的js包下載到npm的包路徑下镇饺。
npm install webpack -g 或 cnpm install webpack -g
3）安裝webpack指定的版本：
進(jìn)入webpack目錄，運(yùn)行：cnpm install --save-dev webpack@3.6.0
全局安裝：npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g
在cmd狀態(tài)輸入webpack送讲，出現(xiàn)如下提示說(shuō)明 webpack安裝成功：
1.2.0 入門程序
通過(guò)入門程序?qū)崿F(xiàn)對(duì)js文件的打包奸笤，體會(huì)webpack是如何對(duì)應(yīng)用進(jìn)行模塊化管理。
對(duì)上邊1+1=2的例子使用webpack進(jìn)行模塊化管理
1.2.1 定義模塊
創(chuàng)建webpacktest01目錄哼鬓，將vue.min.js及vue_02.html拷貝到目錄下监右。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!--{{name}}-->
<!--v-text可以解決網(wǎng)速慢出現(xiàn)表達(dá)式的問(wèn)題-->
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span v-text="result"></span>
<!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<button v-on:click="change">計(jì)算</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"hha",
num1:0,
num2:0,
result:0,
url:"http://www.baidu.com"
},
methods:{
change:function () {
this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
alert(this.result)
}
}
});
</script>
</html>
1、定義model01.js
在webpacktest01目錄下創(chuàng)建model01.js
將本程序使用的加法運(yùn)算的js方法抽取到一個(gè)js文件异希，此文件就是一個(gè)模塊
// 定義add函數(shù)
function add(x, y) {
return x + y
}
// function add2(x, y) {
// return x + y+1
// }
// 導(dǎo)出add方法
module.exports.add = add;
// module.exports ={add,add2};//如果有多個(gè)方法這樣導(dǎo)出
// module.exports.add2 = add2//如果有多個(gè)方法也可以這樣導(dǎo)出
2健盒、定義main.js
在webpacktest01目錄下創(chuàng)建main.js，main.js是本程序的js主文件，包括如下內(nèi)容：
1扣癣、在此文件中會(huì)引用model01.js模塊
2惰帽、引用vue.min.js（它也一個(gè)模塊）
3、將html頁(yè)面中構(gòu)建vue實(shí)例的代碼放在main.js中父虑。
main.js的代碼如下
var {add} = require("./model01.js")
var Vue = require("./vue.min.js")
var vm = new Vue({
el:"#app",
data:{
name:"hha",
num1:0,
num2:0,
result:0,
url:"http://www.baidu.com"
},
methods:{
change:function () {
this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
alert(this.result)
}
}
});
1.2.2 打包測(cè)試
上邊將mode01.js模塊及main.js主文件編寫完成该酗，下邊使用webpack對(duì)這些js文件進(jìn)行打包
1、進(jìn)入程序目錄士嚎，執(zhí)行webpack main.js build.js 呜魄，這段指令表示將main.js打包輸出為 build.js文件
執(zhí)行完成，觀察程序目錄是否出現(xiàn)build.js莱衩。
2爵嗅、在html中引用build.js
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title></title>
</head>
<body>
<div id="app">
<!--{{name}}-->
<!--v-text可以解決網(wǎng)速慢出現(xiàn)表達(dá)式的問(wèn)題-->
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span v-text="result"></span>
<!--<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
<!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
<button v-on:click="change">計(jì)算</button>
</div>
</body>
<script src="build.js"></script>
</html>
總結(jié)：
webpack可以將js分模塊開發(fā)，開發(fā)完成對(duì)各模塊代碼打包成一個(gè)統(tǒng)一的文件膳殷。
前端模塊開發(fā)的思想和服務(wù)端模塊開發(fā)的思想是一致的操骡，有利于多人協(xié)助開發(fā)。
1.3 webpack-dev-server
1赚窃、安裝webpack-dev-server
使用 webpack-dev-server需要安裝webpack、 webpack-dev-server和 html-webpack-plugin三個(gè)包岔激。
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev(這是本地安裝)
安裝完成勒极，會(huì)發(fā)現(xiàn)程序目錄出現(xiàn)一個(gè)package.json文件，此文件中記錄了程序的依賴虑鼎。
2辱匿、配置webpack-dev-server
在package.json中配置script
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
--inline：自動(dòng)刷新
--hot：熱加載
--port：指定端口
--open：自動(dòng)在默認(rèn)瀏覽器打開
--host：可以指定服務(wù)器的 ip，不指定則為127.0.0.1炫彩，如果對(duì)外發(fā)布則填寫公網(wǎng)ip地址
devDependencies：開發(fā)人員在開發(fā)過(guò)程中所需要的依賴匾七。
scripts：可執(zhí)行的命令
1.3.1 配置webpack.config.js
在webpacktest02目錄下創(chuàng)建 webpack.config.js， webpack.config.js是webpack的配置文件江兢。在此文件中可以配置應(yīng)用的入口文件昨忆、輸出配置、插件等杉允，其中要實(shí)現(xiàn)熱加載自動(dòng)刷新功能需要配置html-webpack-plugin插件邑贴。
html-webpack-plugin的作用是根據(jù)html模板在內(nèi)存生成html文件，它的工作原理是根據(jù)模板文件在內(nèi)存中生成一個(gè)index.html文件叔磷。
1拢驾、配置模板文件
將原來(lái)的vue_02.html作為模板文件，為了和內(nèi)存中的index.html文件名區(qū)別改基，注意將vue_02.html中的script標(biāo)簽去掉
2繁疤、配置 html-webpack-plugin
在webpack.config.js中配置html-webpack-plugin插件
//引用html-webpack-plugin插件，作用是根據(jù)html模板在內(nèi)存生成html文件，它的工作原理是根據(jù)模板文件在內(nèi)存中生成一個(gè)index.html文件稠腊。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對(duì)路徑
filename:'build.js' //輸出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首頁(yè)', //生成的頁(yè)面標(biāo)題<head><title>首頁(yè)</title></head>
filename: 'index.html', //webpack-dev-server在內(nèi)存中生成的文件名稱案疲，自動(dòng)將build注入到這個(gè)頁(yè)面底部，才能實(shí)現(xiàn)自動(dòng)刷新功能
template: 'test02.html' //根據(jù)vue_02.html這個(gè)模板來(lái)生成(這個(gè)文件請(qǐng)程序員自己生成)
})
]
}
目錄結(jié)構(gòu)
1.3.2 啟動(dòng)
啟動(dòng)文件：
1麻养、進(jìn)入 webpacktest02目錄褐啡，執(zhí)行npm run dev
2、使用webstorm鳖昌，右鍵package.json文件备畦，選擇“Show npm Scripts”
打開窗口：
雙擊 dev。
注意：dev就是在package.json中配置的webpack dev server命令许昨。
發(fā)現(xiàn)啟動(dòng)成功自動(dòng)打開瀏覽器懂盐。
修改src中的任意文件內(nèi)容，自動(dòng)加載并刷新瀏覽器糕档。
1.3.3 debug調(diào)試
使用了webpack之后就不能采用傳統(tǒng)js的調(diào)試方法在chrome中打斷點(diǎn)莉恼。
webpack將多個(gè)源文件打包成一個(gè)文件，并且文件的內(nèi)容產(chǎn)生了很大的變化速那，webpack提供devtool進(jìn)行調(diào)試俐银，devtool是基于sourcemap的方式，在調(diào)試時(shí)會(huì)生成一個(gè)map文件端仰，其內(nèi)容記錄生成文件和源文件的內(nèi)容映射捶惜，即生成文件中的哪個(gè)位置對(duì)應(yīng)源文件中的哪個(gè)位置，有了sourcemap就可以在調(diào)試時(shí)看到源代碼荔烧。
配置如下：
1吱七、在webpack.config.js中配置：
devtool: 'eval‐source‐map'
2、在js中跟蹤代碼的位置上添加debugger
一個(gè)例子：
在add方法中添加debugger
啟動(dòng)應(yīng)用鹤竭，刷新頁(yè)面跟蹤代碼：
點(diǎn)擊“計(jì)算” 即進(jìn)入debugger代碼位置踊餐，此時(shí)可以使用chrome進(jìn)行調(diào)試了。
