在學(xué)習(xí)webpack之前，先問自己幾個問題，帶著問題學(xué)習(xí)。
首先webpack是什么?我們?yōu)槭裁匆獙W(xué)習(xí)webpack?
webpack是一個(自動化)構(gòu)建工具，所謂自動化，因為構(gòu)建工具就是讓我們不再做重復(fù)的事情，解放我們的雙手的。
這張圖告訴我們webpack可以將所有的前端文件都打包成模塊，使用common.js規(guī)范(js模塊化規(guī)范)導(dǎo)入其他功能代碼，而不用手動復(fù)制代碼到你正在寫的文件。
那么自動化具體是怎么樣的呢？ 舉個栗子。
平時習(xí)慣使用es6語法來寫js代碼，但是瀏覽器不支持es6代碼，這時我們就要將es6代碼轉(zhuǎn)換為es5代碼。
<code>
a.es6
var a = () => console.log(this)</code>
執(zhí)行編譯命令
<code>
es6 -c a.es6 //this執(zhí)行window對象
</code>
得到a.js
<code>
function a () {
console.log(this) //this指向window對象
}
</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，就自動幫助我們完成這一系列工作。
webpack最基本的功能就是打包模塊了，下面來一步步的寫一個Demo
建一個空文件夾
cmd進(jìn)入該文件夾下
輸入<code>npm init</code> 會讓你選擇比如項目名一系列選擇，生成的目錄package.json是該項目的配置，以及依賴，后面會講到。
輸入<code>npm install webpack</code> 項目安裝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 他會引入打包后的bundle.js文件
輸入<code>webpack main.js bundle.js</code>生成bundle.js文件
最后打開index.html就會顯示main.js里的信息。
在我參照一些博客寫上述demo的過程中，出現(xiàn)過很多坑，比如說某些文檔說的局部安裝webpack，在cmd使用打包文件命令時要額外指定webpack在node_modules中的地址，博客主這樣寫能成功，我卻在這里被坑了很久，直接用webpack ... 無需指定位置即可。可能這種情況以后能用上。
webpack高級功能
在寫這篇文章之前在項目中遇到了一個問題，在webpack構(gòu)建的本地服務(wù)器中去獲取java后臺tomcat啟動的服務(wù)器里的資源的跨域問題。在百度查資料后，發(fā)現(xiàn)解決此問題很繁瑣，主要涉及到的知識點(diǎn)是webpack webpack-dev-server，雖然網(wǎng)上有配置，但無法通過簡單的復(fù)制粘貼就能達(dá)到目的，只有往深處挖細(xì)節(jié)，不留死角，一步一步來才能解決問題，而且正好讓我可以了解跨域和webpack，知其然更要知其所以然。
構(gòu)建本地webpack服務(wù)器(使用代理解決跨域問題)
cmd進(jìn)入項目目錄
<code>npm install webpack-dev-server //install之后只會出現(xiàn)空的webpack-dev-server文件夾，第二次下載才有內(nèi)容</code>
之后我按照百度介紹的進(jìn)入命令行<code>webpack-dev-server</code>即可啟動本地webpack服務(wù)器，可輸出的結(jié)果是，命令行不是內(nèi)部或外部命令。解決方法是 在package.json的scripts對象中添加<code> "start":"webpack-dev-server"</code>然后cmd輸入<code>npm start</code>即可啟動 。
注意事項:webpack-dev-server需要依賴webpack-dev-middleware
通過npm啟動要配置webpack.config.js和package.json 后面會講到配置問題。
啟動服務(wù)器默認(rèn)會進(jìn)入根目錄，需手動在webpack.config.js中配置路徑。位置為index.html所在的文件夾
在我最近做的項目里，百度查找的webpack跨域需要在webpack-dev-server配置中解決，但是項目里使用的是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項目中使用的是webpack-dev-middleware和webpack-hot-middleware實現(xiàn)的自動刷新，刪除webpack-dev-middleware下載webpack-dev-server再啟動就會報錯。
好吧！在群里問了一下，問題就解決了。走了很多很多的彎路，但感覺是值得的。至少解決問題是在vue-cli腳手架里固定的配置，我學(xué)會了如何自己配置。
自己配置的方法:
在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>
在項目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搭建的項目里是會報錯的，因為vue-cli已經(jīng)自動生成了代理的配置。
在<code>vue-webpack/config/index.js</code>目錄下
<code>/classrooms</code>不需要寫完整
例如<code>/classr</code>寫成這樣，它也會自動匹配請求的url地址為 <code>"/classrooms/" + $(".create-import #classId").val() + "/members"</code>
簡單的一行代碼，即可完成和上面一樣的結(jié)果。
在這里<code>console.log(xmlHttp.responseText)出來的是字符串格式的數(shù)據(jù)，轉(zhuǎn)成json/對象 格式的則需要<code>var x = JSON.parse(xmlHttp.responseText)</code>
解決問題的過程我做起來太復(fù)雜了，實際上很簡單，該問題告一段落，以后有webpack相關(guān)的問題，都在這里解決。
