曾經(jīng)及目前最火的一款模塊加載器打包工具治笨，它能把各種資源驳概，例如JS（含JSX）、coffee旷赖、樣式（含less/sass）顺又、圖片等都作為模塊來(lái)使用和處理。它就是webpack等孵。我是從去年稚照，也就是2016年做騰訊智推項(xiàng)目的時(shí)候第一次正式使用webpack，當(dāng)時(shí)使用webpack做的項(xiàng)目構(gòu)建俯萌，React做的項(xiàng)目架構(gòu)果录，那年那次那是一波痛苦一波喜呀，想想咐熙，也充了不少血咯弱恒。哈哈，突然有點(diǎn)想聊聊React的沖動(dòng)糖声，還是回到今天寫(xiě)的主題webpack斤彼。寫(xiě)webpack文章是這個(gè)邏輯：知道為什么學(xué)習(xí)它到學(xué)會(huì)它的使用再到學(xué)會(huì)它的應(yīng)用分瘦。
No1蘸泻、為什么用webpack？
簡(jiǎn)單來(lái)說(shuō)大概兩個(gè)方面的原因：
一是因?yàn)槲覀冃枰褂媚K化的機(jī)制來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)和管理嘲玫。
二是因?yàn)槲覀冃枰褂肊S6規(guī)則來(lái)寫(xiě)JS悦施，需要使用如SCSS、LESS等預(yù)處理器來(lái)寫(xiě)CSS
而這些ES6規(guī)則和SCSS等類(lèi)型文件的代碼我們的運(yùn)行環(huán)境又不認(rèn)識(shí)去团，這個(gè)時(shí)候webpack挺身而出抡诞，說(shuō)它聚成了能把這些瀏覽器不認(rèn)識(shí)的東西轉(zhuǎn)成它能解析的東西的能力。于是就試試土陪，原來(lái)是它確實(shí)有這種能力昼汗，這樣我們就可以愉快的玩ES6標(biāo)準(zhǔn)和像寫(xiě)JS一樣使用預(yù)處理器寫(xiě)CSS。而不用擔(dān)心運(yùn)行環(huán)境是否認(rèn)識(shí)它們了鬼雀，因此顷窒，我們也就開(kāi)始使用webpack。
No2源哩、還記得Grunt鞋吉、Gulp嗎？
2013年励烦，那會(huì)剛?cè)肼毼阶牛?014年做的第一個(gè)完整項(xiàng)目（時(shí)尚類(lèi)），當(dāng)時(shí)跟著一波大神搞了一段時(shí)間封閉坛掠，那會(huì)使用的就是Grunt做構(gòu)建工具赊锚，之后回到工位治筒，又發(fā)現(xiàn)了Gulp的簡(jiǎn)單方便，又立馬將Gulp做為自己的基礎(chǔ)項(xiàng)目構(gòu)建工具舷蒲，再后來(lái)有ES6的發(fā)展矢炼，CSS預(yù)處理的興起，也就自然而然的使用起了webpack阿纤。怎么感覺(jué)寫(xiě)著寫(xiě)著有點(diǎn)跑題了句灌，呵呵！這里應(yīng)該是要談?wù)勥@三者的區(qū)別欠拾。
一胰锌、有關(guān)上面兩個(gè)帶G開(kāi)頭的構(gòu)建工具，個(gè)人認(rèn)為腦子里需要有文件概念藐窄，用來(lái)處理文件的壓縮资昧、合并、測(cè)試等等荆忍。這兩個(gè)的工作方式都是在一個(gè)配置文件（gruntfile.js格带、gulpfile.js）中，指明對(duì)某些文件進(jìn)行類(lèi)似編譯刹枉，組合叽唱，壓縮等。gulp的配置比grunt更簡(jiǎn)單更好理解微宝。
二棺亭、有關(guān)webpack個(gè)人認(rèn)為腦子里需要有模塊的概念，為什么這么說(shuō)呢蟋软？看一下官網(wǎng)提供的下面這張?jiān)韴D：
webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體镶摘，通過(guò)一個(gè)給定的主文件（如：index.js），webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的依賴(lài)文件岳守，使用對(duì)應(yīng)的loaders處理它們凄敢，最后打包成一個(gè)瀏覽器可識(shí)別的JavaScript文件。
No3湿痢、檢測(cè)自己是否要繼續(xù)學(xué)習(xí)webpack
先看下面這個(gè)webpack的配置文件涝缝，如果每一項(xiàng)你都懂，那接下來(lái)幾天里我要寫(xiě)的內(nèi)容能帶給你的收獲也許就比較有限了蒙袍。
No4俊卤、怎么來(lái)寫(xiě)有關(guān)webpack的知識(shí)？
對(duì)害幅，一個(gè)構(gòu)建工具而已消恍，可以講的不多，如果你是很懂的話(huà)以现，那我寫(xiě)的可都是廢話(huà)狠怨，我只想把這些廢話(huà)寫(xiě)的更深入更直白點(diǎn)约啊，就如先搞懂你要學(xué)習(xí)的東西是個(gè)什么，它在前端界到底有何存在意義以及為什么要去學(xué)習(xí)它佣赖，再學(xué)會(huì)使用恰矩，最后學(xué)會(huì)應(yīng)用，按這個(gè)邏輯走憎蛤，所以有關(guān)webpack會(huì)有三篇外傅，分別是：
一、前端最強(qiáng)構(gòu)建webpack-問(wèn)題
二俩檬、前端最強(qiáng)構(gòu)建webpack-使用
三萎胰、前端最強(qiáng)構(gòu)建webpack-應(yīng)用（結(jié)合React）
總結(jié)
努力只是想過(guò)的更好罷了
