? ? ? 距離上次寫(xiě)博客汽烦，大約已經(jīng)有兩年時(shí)間，而且之前題目寫(xiě)的也并非關(guān)于IT莉御，而是關(guān)于股票期貨與各個(gè)指數(shù)算法分析（假如你經(jīng)歷過(guò)2015年中國(guó)人的瘋狂就會(huì)對(duì)我為什么要寫(xiě)個(gè)會(huì)深表同感撇吞，我從2011年炒股票到2015年完全放棄這個(gè)玩意），這次寫(xiě)博客的原因是對(duì)自己最近一段時(shí)間的工作回顧颈将，選擇簡(jiǎn)書(shū)是因?yàn)榍∏捎袡C(jī)緣看到別人寫(xiě)過(guò)梢夯，且覺(jué)得簡(jiǎn)書(shū)的界面做的確實(shí)挺好看的（我覺(jué)得他們這個(gè)字體挺好看的）。
? ? ? 前端H5作為近期在市場(chǎng)上非城缁火的一個(gè)技術(shù)方向颂砸，其實(shí)在很久之前是被各個(gè)工種的程序員所看不起認(rèn)為比較很低端的技術(shù)（包括本人在內(nèi)，作為一個(gè)前iOS程序猿曾經(jīng)在一次面試時(shí)當(dāng)著面試官表達(dá)過(guò)自己對(duì)H5這門(mén)技術(shù)的不屑一顧死姚，如今被現(xiàn)實(shí)打臉人乓，作為一個(gè)專(zhuān)職前端開(kāi)發(fā)人員且不斷的給自己挖坑），H5之所以受到市場(chǎng)上的青睞源于他的跨平臺(tái)以及更新方便比如移動(dòng)Hybird 應(yīng)用以及普通web應(yīng)用都毒，而讓他插上翅膀的則是nodejs的問(wèn)世假如你知道且你了解CMD 語(yǔ)法你就會(huì)明白他對(duì)前端意義有多大色罚，從美工到web前端開(kāi)發(fā)工程師稱(chēng)謂上的變化足可證明，假如15年你學(xué)H5 前端账劲，面試官對(duì)你的要求會(huì)相當(dāng)之簡(jiǎn)單戳护，熟悉H5與H4之間的差別熟悉CSS3，假如你對(duì)jsonp,dom結(jié)構(gòu)瀑焦，算法有一定了解恭喜你腌且，你已經(jīng)到達(dá)了一名美工的基本要求了，但如今我只能告訴你單靠這些你連美工都當(dāng)不了榛瓮，angular铺董，vue,react,gulp,codova,grunt,express,sass,nwjs，typescript這些名詞的出現(xiàn)大約剛好有兩年禀晓，而nodejs已經(jīng)更新到8點(diǎn)幾版本了（如果你對(duì)這個(gè)沒(méi)什么概念精续，你可以看下jdk的最新版本）。
? ? ? 而這次寫(xiě)博客的主角則是webpack粹懒，作為一個(gè)前angular開(kāi)發(fā)人員對(duì)于gulp之流使用算是有一定心得重付，但使用webpack則是從最近兩周開(kāi)始，主要原因是因?yàn)橛袀€(gè)項(xiàng)目用vue凫乖，使用webpack堪夭，而在上周接到對(duì)于現(xiàn)有平臺(tái)項(xiàng)目進(jìn)行重構(gòu)并且要兼容vue愕把，（作為一個(gè)程序猿妥協(xié)與退讓都是不存在的）大約經(jīng)歷了倆個(gè)小時(shí)（實(shí)際不到15分鐘），立馬給自己挖第一個(gè)坑森爽，現(xiàn)有項(xiàng)目用vue重寫(xiě)框架統(tǒng)一工具統(tǒng)一后期維護(hù)方便，當(dāng)然這個(gè)方案最后是被否了嚣镜，開(kāi)玩笑那么多項(xiàng)目要重寫(xiě)沒(méi)個(gè)半年寫(xiě)的完爬迟？不過(guò)被否就被否思維活躍如本尊，想新方案不是分分鐘在會(huì)議室里瞎扯淡半天菊匿，leader重新進(jìn)來(lái)問(wèn)討論結(jié)果付呕，一個(gè)idea從腦海閃過(guò)，使用webpack,做重構(gòu)并且前后臺(tái)完全分離跌捆，用e6語(yǔ)法做代碼分割徽职，做一個(gè)多頁(yè)面版的web架構(gòu)，leader對(duì)這個(gè)提議當(dāng)然是相當(dāng)贊同佩厚，原因簡(jiǎn)單啊對(duì)現(xiàn)有的架構(gòu)遷移量不大啊姆钉，而且同時(shí)又起到了優(yōu)化結(jié)構(gòu)，實(shí)現(xiàn)代碼管理的功能抄瓦，最關(guān)鍵的是保住了jquery(去年一年我都堅(jiān)持不用jQuery寫(xiě)代碼而是堅(jiān)持用javascript原生潮瓶，現(xiàn)實(shí)總是習(xí)慣性的嘲諷你的無(wú)知與傲慢)。
? ? 事情講出來(lái)做得到就是有本事钙姊，做不到就是吹牛毯辅，而我這個(gè)人向來(lái)不習(xí)慣在工作這么正式的事上吹牛逼，所以說(shuō)做就做煞额，首先介紹下webpack從名字就能看出來(lái)他是web端的用node編寫(xiě)的打包工具可以將web端的文件進(jìn)行打包發(fā)布思恐，起到壓縮以及代碼偽裝的作用（老式的網(wǎng)頁(yè)一般都是程序猿手寫(xiě)發(fā)布可閱讀性非常強(qiáng)，而且語(yǔ)法也是千奇百怪）膊毁，極端點(diǎn)的甚至可以將web文件打包成gzip文件（知道的都說(shuō)好不知道建議找百度老師）胀莹，而且他也提供了一套開(kāi)發(fā)插件比如webpack-serve,webpack-hot-middleware.webpack本身的option(官方不這么說(shuō)，我這么叫寫(xiě)過(guò)插件的人都懂)分為entry媚媒，output嗜逻，loader，plugin分別對(duì)應(yīng)了文件入口缭召，輸出文件出口栈顷，文件編譯規(guī)則,以及插件使用，期中比較強(qiáng)大的是loader和plugin,假如你是一名后臺(tái)開(kāi)發(fā)人員應(yīng)該對(duì)中間件這個(gè)東西有一定了解這個(gè)也用法差不多嵌巷，在一個(gè)loader里 假如我寫(xiě)一個(gè){test/.js$/ ,rule:'babel'}那么當(dāng)你的文件是js時(shí)他就會(huì)通過(guò)babel這個(gè)loader 來(lái)檢查js 你可以用require module.exports 這種語(yǔ)法寫(xiě)js 也可以用import '' from '' export default 只要你在他的.babelrc文件里配置他支持的語(yǔ)法范圍是es6以上或者cmd就行萄凤。介紹就這么多假如你不懂請(qǐng)您去看官網(wǎng)或者去慕課網(wǎng)看視頻都是免費(fèi)的。
? ?接下來(lái)就是講架構(gòu)的問(wèn)題搪哪，前后端分離就表示前端項(xiàng)目要完全獨(dú)立與后端來(lái)做靡努，那么從開(kāi)發(fā)，測(cè)試，部署惑朦，業(yè)務(wù)邏輯兽泄，vendor都要考慮進(jìn)去，首先是前端的目錄結(jié)構(gòu)分為build,src,mock,vendor,config,test接下來(lái)一一解讀重建這些目錄的目的何在以及其中的二級(jí)目錄以及文件漾月。
? ? build目錄是webpack的腳本目錄在里面對(duì)應(yīng)的是webpack.prod.js? webpack.test.js webpack.dev.js 分別對(duì)應(yīng)生產(chǎn)病梢，測(cè)試，開(kāi)發(fā)環(huán)境配置當(dāng)然運(yùn)行的腳本文件不是這些梁肿，這些其實(shí)只是配置文件蜓陌，我們要做的是一個(gè)多頁(yè)面的前端組件化的東西，我們基本的配置文件也要組件化吩蔑，所以我們?cè)谶@個(gè)文件里有一個(gè)inherit的目錄钮热，這里面寫(xiě)的都是公用部分，比如entry,plugns.還有l(wèi)oader這些在項(xiàng)目中的共有部分比較多可以直接導(dǎo)出到外部合并烛芬，webpack.prod.js以及test和dev配置的區(qū)別在于首先要配置process.env的不同方便在腳本上對(duì)不同環(huán)境的做出不同的操作隧期，比如assectPublicpath,以及path這個(gè)在webpack output中起到至關(guān)重要的作用假如你的文件都在同一目錄下，那么可以配置assetPublicPath為相對(duì)路徑這樣在webpack-html-plugin中生成的src就是相對(duì)路徑蛀骇，假如你的這些文件都不在同一個(gè)目錄甚至是不在同一個(gè)服務(wù)器中那么這個(gè)就很有必要了你可以配置assetPublicPath為絕對(duì)路徑厌秒，這樣生成的應(yīng)用就是帶域名的路徑，在url-loader處理css的相對(duì)路徑這個(gè)也起到非常大的作用擅憔，在prod和dev兩個(gè)環(huán)境相同的是entry 不同的在開(kāi)發(fā)中我們要的是高效所以不會(huì)對(duì)壓縮偽裝有要求鸵闪，我們需要的是啟動(dòng)本地服務(wù)器，熱更新等等插件暑诸，相同的是都會(huì)獲取所有的入口文件蚌讼，然后以數(shù)組的方式創(chuàng)建html-webpack-plugin生成多頁(yè)面應(yīng)用。
? ? ?src目錄是我們的業(yè)務(wù)目錄里面有三個(gè)大目錄page和resource个榕，component篡石，page處理我們的頁(yè)面模板（這里我用的是ejs模板引擎）以及業(yè)務(wù)邏輯同樣CMD語(yǔ)法支持resource里有倆個(gè)子目錄一個(gè)static另一個(gè)layout，static對(duì)應(yīng)的是我們無(wú)法用cnpm包引用的老舊插件這個(gè)我直接用copy-webpack-plugn處理將他直接copy到build目錄相關(guān)配置在config里西采，layout這個(gè)概念很好我也是借用但是對(duì)于組件化這個(gè)概念真的很棒凰萨，一般來(lái)說(shuō)我們一個(gè)頁(yè)面有header ?nav body footer 這些小組件，也會(huì)有menulist conten這種小組件械馆，layout 對(duì)應(yīng)的是不同的布局方案胖眷，假如你寫(xiě)過(guò)freemarker這個(gè)你應(yīng)該很熟，將頁(yè)面里的小件憑借起來(lái)比起前端手寫(xiě)代碼來(lái)說(shuō)要省很多事,page里面調(diào)用layout的邏輯生成html共有部分再改我們只需要改component里面的小組件即可霹崎。
? ? vendor 對(duì)應(yīng)的是我們第三方庫(kù)主要是那些無(wú)法用npm包維護(hù)的庫(kù)但我們?cè)陧?xiàng)目里要引用這珊搀，這個(gè)不得不提common-webpack-plugin的插件將多個(gè)項(xiàng)目里引用的打包到common中去，我們的目標(biāo)是盡可能少的發(fā)起HTTP請(qǐng)求減少冗余代碼尾菇。
? mock用過(guò)的人都知道前端在前后臺(tái)分離時(shí)用的境析，在后臺(tái)接口還么做好的時(shí)候可以寫(xiě)本地接口囚枪，最近聽(tīng)說(shuō)一個(gè)叫markdown的東西假如你的后臺(tái)兄弟愿意寫(xiě)給你，那你大可不必重建
? ? test單元測(cè)試用的karam的使用教程問(wèn)百度老師吧劳淆，測(cè)試時(shí)開(kāi)發(fā)環(huán)境的必要不少的環(huán)節(jié)链沼，假如前端可以自動(dòng)化測(cè)試，那么可以省去很多不必要的麻煩沛鸵。
? ? ?目錄介紹完就應(yīng)該開(kāi)始講坑了忆植，所謂裝逼10分鐘臺(tái)下十年功，從這周六以及上周六都在焦慮中度過(guò)谒臼，直到今天項(xiàng)目跑起來(lái)后才算松口氣，講一講最初架構(gòu)的時(shí)候我并咩有這么想我想的簡(jiǎn)單粗暴耀里，寫(xiě)一個(gè)像.vue這個(gè)的模板然后用import這種語(yǔ)法來(lái)插入就行了蜈缤，我也是這么做的，事實(shí)是現(xiàn)實(shí)總會(huì)不斷敲打你告訴你你還太年輕冯挎，當(dāng)我用import 獲取到路徑然后用fs 獲取文件文本再拼接成一個(gè)html模板后居然發(fā)現(xiàn)jQuery果然好強(qiáng)大底哥，你想用復(fù)制黏貼的手法用jQuery 他會(huì)告訴你別太天真的，你連$符都找不到怎么用房官，報(bào)錯(cuò)報(bào)的你莫名其妙趾徽，只能通過(guò)外包導(dǎo)入以及webpack加alias這種方式，最神奇的是當(dāng)時(shí)我就寫(xiě)了一個(gè)文件IO以及起了一個(gè)本地服務(wù)器電腦直接就卡死了翰守，甚至于直接連啟動(dòng)都啟動(dòng)不了了孵奶，只能求助網(wǎng)管，還有就是bootstap編譯蜡峰，webpack有一個(gè)dll 預(yù)編譯的文件可以編譯那些只需要編譯一次后面就不需要編譯的文件了袁，我用了bootstrap不行會(huì)報(bào)錯(cuò)外部引用也沒(méi)用最后我走了copy-webpack-plugn這條路，并把所有的引入都寫(xiě)到header.
? ? 這次的架構(gòu)說(shuō)的簡(jiǎn)單點(diǎn)就是用后臺(tái)的思維做前端的多頁(yè)面應(yīng)用（vue這種SPA應(yīng)用和這種多頁(yè)面相比還是復(fù)雜的多所以才會(huì)有vuex這種存在）湿颅，最終將前臺(tái)文件打包载绿，好處就是實(shí)現(xiàn)了組件化，以及前后臺(tái)分離油航，減少http請(qǐng)求崭庸。壞處嘛就是前端的業(yè)務(wù)量將會(huì)繼續(xù)上漲（不加沒(méi)有意義的班，在電腦面前發(fā)呆不如回家睡覺(jué)谊囚，或者直接在桌上睡覺(jué)）
