在學(xué)習(xí)webpack之前，先問自己幾個(gè)問題，帶著問題學(xué)習(xí)占键。
首先webpack是什么?我們?yōu)槭裁匆獙W(xué)習(xí)webpack?
webpack是一個(gè)(自動(dòng)化)構(gòu)建工具蹲姐，所謂自動(dòng)化磨取，因?yàn)闃?gòu)建工具就是讓我們不再做重復(fù)的事情，解放我們的雙手的柴墩。
這張圖告訴我們webpack可以將所有的前端文件都打包成模塊忙厌，使用common.js規(guī)范(js模塊化規(guī)范)導(dǎo)入其他功能代碼，而不用手動(dòng)復(fù)制代碼到你正在寫的文件江咳。
那么自動(dòng)化具體是怎么樣的呢逢净？ 舉個(gè)栗子。
平時(shí)習(xí)慣使用es6語法來寫js代碼歼指，但是瀏覽器不支持es6代碼爹土，這時(shí)我們就要將es6代碼轉(zhuǎn)換為es5代碼。
<code>
a.es6
var a = () => console.log(this)</code>
執(zhí)行編譯命令
<code>
es6 -c a.es6 //this執(zhí)行window對(duì)象
</code>
得到a.js
<code>
function a () {
console.log(this) //this指向window對(duì)象
}
</code>
執(zhí)行壓縮命令
<code>uglify -s a.js -o a.min.js</code>
得到a.min.js
<code>function a(){console.log(this)}</code>
這樣我們每次修改代碼踩身，或者添加胀茵，都要重復(fù)輸出上面2行命令，極其繁瑣挟阻，而使用webpack琼娘，就自動(dòng)幫助我們完成這一系列工作峭弟。
webpack最基本的功能就是打包模塊了，下面來一步步的寫一個(gè)Demo
建一個(gè)空文件夾
cmd進(jìn)入該文件夾下
輸入<code>npm init</code> 會(huì)讓你選擇比如項(xiàng)目名一系列選擇脱拼，生成的目錄package.json是該項(xiàng)目的配置瞒瘸，以及依賴，后面會(huì)講到挪拟。
輸入<code>npm install webpack</code> 項(xiàng)目安裝webpack
新建main.js文件
<code>document.write('mmmmmmmmmmmmm')</code>
新建index.html文件
<pre><!DOCTYPE html>
<html><head>
<title></title>
</head><body><script type="text/javascript" src="bundle.js"></script>
</body>
</html></pre>
這是入口html 他會(huì)引入打包后的bundle.js文件
輸入<code>webpack main.js bundle.js</code>生成bundle.js文件
最后打開index.html就會(huì)顯示main.js里的信息挨务。
在我參照一些博客寫上述demo的過程中，出現(xiàn)過很多坑玉组，比如說某些文檔說的局部安裝webpack谎柄，在cmd使用打包文件命令時(shí)要額外指定webpack在node_modules中的地址，博客主這樣寫能成功惯雳，我卻在這里被坑了很久朝巫，直接用webpack ... 無需指定位置即可∈埃可能這種情況以后能用上劈猿。
webpack高級(jí)功能
在寫這篇文章之前在項(xiàng)目中遇到了一個(gè)問題，在webpack構(gòu)建的本地服務(wù)器中去獲取java后臺(tái)tomcat啟動(dòng)的服務(wù)器里的資源的跨域問題潮孽。在百度查資料后揪荣，發(fā)現(xiàn)解決此問題很繁瑣，主要涉及到的知識(shí)點(diǎn)是webpack webpack-dev-server往史，雖然網(wǎng)上有配置仗颈，但無法通過簡單的復(fù)制粘貼就能達(dá)到目的，只有往深處挖細(xì)節(jié)椎例，不留死角挨决，一步一步來才能解決問題，而且正好讓我可以了解跨域和webpack订歪，知其然更要知其所以然脖祈。
構(gòu)建本地webpack服務(wù)器(使用代理解決跨域問題)
cmd進(jìn)入項(xiàng)目目錄
<code>npm install webpack-dev-server //install之后只會(huì)出現(xiàn)空的webpack-dev-server文件夾，第二次下載才有內(nèi)容</code>
之后我按照百度介紹的進(jìn)入命令行<code>webpack-dev-server</code>即可啟動(dòng)本地webpack服務(wù)器刷晋，可輸出的結(jié)果是盖高，命令行不是內(nèi)部或外部命令。解決方法是 在package.json的scripts對(duì)象中添加<code> "start":"webpack-dev-server"</code>然后cmd輸入<code>npm start</code>即可啟動(dòng) 眼虱。
注意事項(xiàng):webpack-dev-server需要依賴webpack-dev-middleware
通過npm啟動(dòng)要配置webpack.config.js和package.json 后面會(huì)講到配置問題喻奥。
啟動(dòng)服務(wù)器默認(rèn)會(huì)進(jìn)入根目錄，需手動(dòng)在webpack.config.js中配置路徑蒙幻。位置為index.html所在的文件夾
在我最近做的項(xiàng)目里映凳，百度查找的webpack跨域需要在webpack-dev-server配置中解決，但是項(xiàng)目里使用的是webpack-dev-middleware和webpack-hot-middleware,它們倆的效果等同于webpack-dev-server和webpack-dev-middleware邮破。webpack-dev-server已經(jīng)知道是什么了诈豌，現(xiàn)在要了解webpack-hot-middleware的作用與區(qū)別仆救。
在我自己的vue+webpack項(xiàng)目中使用的是webpack-dev-middleware和webpack-hot-middleware實(shí)現(xiàn)的自動(dòng)刷新，刪除webpack-dev-middleware下載webpack-dev-server再啟動(dòng)就會(huì)報(bào)錯(cuò)矫渔。
好吧彤蔽！在群里問了一下，問題就解決了庙洼。走了很多很多的彎路顿痪，但感覺是值得的。至少解決問題是在vue-cli腳手架里固定的配置油够，我學(xué)會(huì)了如何自己配置蚁袭。
自己配置的方法:
在webpack.config.js里
<pre>
module.exports = {
entry:"./main.js",
output:{
filename:"bundle.js"
},
devServer:{
port:'8087', //當(dāng)前路徑是localhost:8087
proxy:{
'/classrooms/*':{
target:'http://localhost:8081', //代理的路徑
secure: false
}
}
}
}
</pre>
在項(xiàng)目main.js里寫入ajax
<pre>
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET",'/classrooms/100023');
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4)) {
console.log(xmlHttp.responseText)
} else {
alert('fail');
}
}
</pre>
但是該方法在vue-cli搭建的項(xiàng)目里是會(huì)報(bào)錯(cuò)的，因?yàn)関ue-cli已經(jīng)自動(dòng)生成了代理的配置石咬。
在<code>vue-webpack/config/index.js</code>目錄下
<code>/classrooms</code>不需要寫完整
例如<code>/classr</code>寫成這樣揩悄，它也會(huì)自動(dòng)匹配請(qǐng)求的url地址為 <code>"/classrooms/" + $(".create-import #classId").val() + "/members"</code>
簡單的一行代碼，即可完成和上面一樣的結(jié)果鬼悠。
在這里<code>console.log(xmlHttp.responseText)出來的是字符串格式的數(shù)據(jù)删性，轉(zhuǎn)成json/對(duì)象 格式的則需要<code>var x = JSON.parse(xmlHttp.responseText)</code>
解決問題的過程我做起來太復(fù)雜了，實(shí)際上很簡單焕窝，該問題告一段落蹬挺，以后有webpack相關(guān)的問題，都在這里解決它掂。
