think in webpack

在學(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ù)的事情,解放我們的雙手的柴墩。

Paste_Image.png

這張圖告訴我們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>目錄下

Paste_Image.png

<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)的問題,都在這里解決它掂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末巴帮,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子群发,更是在濱河造成了極大的恐慌晰韵,老刑警劉巖发乔,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件熟妓,死亡現(xiàn)場離奇詭異,居然都是意外死亡栏尚,警方通過查閱死者的電腦和手機(jī)起愈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來译仗,“玉大人抬虽,你說我怎么就攤上這事∽菥” “怎么了阐污?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咱圆。 經(jīng)常有香客問我笛辟,道長功氨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任手幢,我火速辦了婚禮捷凄,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘围来。我一直安慰自己跺涤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布监透。 她就那樣靜靜地躺著桶错,像睡著了一般。 火紅的嫁衣襯著肌膚如雪胀蛮。 梳的紋絲不亂的頭發(fā)上牛曹,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音醇滥,去河邊找鬼黎比。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鸳玩,可吹牛的內(nèi)容都是我干的阅虫。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼不跟,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼颓帝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起窝革,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤购城,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后虐译,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瘪板,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年漆诽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了侮攀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡厢拭,死狀恐怖兰英,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情供鸠,我是刑警寧澤畦贸,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站楞捂,受9級(jí)特大地震影響薄坏,放射性物質(zhì)發(fā)生泄漏正林。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一颤殴、第九天 我趴在偏房一處隱蔽的房頂上張望觅廓。 院中可真熱鬧,春花似錦涵但、人聲如沸杈绸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞳脓。三九已至,卻和暖如春澈侠,著一層夾襖步出監(jiān)牢的瞬間劫侧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工哨啃, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留烧栋,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓拳球,卻偏偏與公主長得像审姓,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子祝峻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 構(gòu)建一個(gè)小項(xiàng)目——FlyBird魔吐,學(xué)習(xí)webpack和react。(本文成文于2017/2/25) 從webpac...
    布蕾布蕾閱讀 16,829評(píng)論 31 98
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,480評(píng)論 2 71
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,298評(píng)論 4 31
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺莱找,特此分享以備自己日后查看酬姆,也希望更多的人看到...
    小小字符閱讀 8,179評(píng)論 7 35
  • 在現(xiàn)在的前端開發(fā)中,前后端分離奥溺、模塊化開發(fā)辞色、版本控制、文件合并與壓縮谚赎、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,449評(píng)論 1 32