一，vue路由守衛(wèi)的生命周期
1，全局的前置路由守衛(wèi) router.beforeEach()
2, 全局解析守衛(wèi) router.beforeResolve
完整的導(dǎo)航解析流程：
導(dǎo)航被觸發(fā)。
在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。
調(diào)用全局的 beforeEach 守衛(wèi)。
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
在路由配置里調(diào)用 beforeEnter。
解析異步路由組件。
在被激活的組件里調(diào)用 beforeRouteEnter。
調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
導(dǎo)航被確認(rèn)。
調(diào)用全局的 afterEach 鉤子。
觸發(fā) DOM 更新。
調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。
導(dǎo)航守衛(wèi)
二，nextTick原理
Vue你不得不知道的異步更新機(jī)制和nextTick原理
三，js原型鏈？實(shí)現(xiàn)一個(gè)繼承
只要是對(duì)象就是有構(gòu)造函數(shù)來(lái)創(chuàng)建的，并且內(nèi)部二個(gè)屬性是從構(gòu)造函數(shù)的prototype衍生的一個(gè)指向，而構(gòu)造函數(shù)的prototype也是一個(gè)對(duì)象，那么它應(yīng)該肯定也有一個(gè)構(gòu)造函數(shù)，首先它是一個(gè)Object {} 對(duì)象，那么它的構(gòu)造函數(shù)肯定是Object,所以就會(huì)有一個(gè)指針proto指向Object.prototype。最后Object.prototype因?yàn)闆](méi)有proto，指向null，這樣就構(gòu)成了一個(gè)原型鏈。
原型繼承的實(shí)現(xiàn)
四，如何將一個(gè)普通css轉(zhuǎn)成scss,less
五，webpack原理
1、核心概念
（1）entry：一個(gè)可執(zhí)行模塊或者庫(kù)的入口。
（2）chunk：多個(gè)文件組成一個(gè)代碼塊?？梢詫⒖蓤?zhí)行的模塊和他所依賴的模塊組合成一個(gè)chunk，這是打包。
（3）loader：文件轉(zhuǎn)換器。例如把es6轉(zhuǎn)為es5，scss轉(zhuǎn)為css等
（4）plugin：擴(kuò)展webpack功能的插件。在webpack構(gòu)建的生命周期節(jié)點(diǎn)上加入擴(kuò)展hook，添加功能。
2、webpack構(gòu)建流程（原理）
從啟動(dòng)構(gòu)建到輸出結(jié)果一系列過(guò)程：
（1）初始化參數(shù)：解析webpack配置參數(shù)，合并shell傳入和webpack.config.js文件配置的參數(shù)，形成最后的配置結(jié)果。
（2）開(kāi)始編譯：上一步得到的參數(shù)初始化compiler對(duì)象，注冊(cè)所有配置的插件，插件監(jiān)聽(tīng)webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，做出相應(yīng)的反應(yīng)，執(zhí)行對(duì)象的 run 方法開(kāi)始執(zhí)行編譯。
（3）確定入口：從配置的entry入口，開(kāi)始解析文件構(gòu)建AST語(yǔ)法樹(shù)，找出依賴，遞歸下去。
（4）編譯模塊：遞歸中根據(jù)文件類型和loader配置，調(diào)用所有配置的loader對(duì)文件進(jìn)行轉(zhuǎn)換，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過(guò)了本步驟的處理。
（5）完成模塊編譯并輸出：遞歸完事后，得到每個(gè)文件結(jié)果，包含每個(gè)模塊以及他們之間的依賴關(guān)系，根據(jù)entry配置生成代碼塊chunk。
（6）輸出完成：輸出所有的chunk到文件系統(tǒng)。
注意：在構(gòu)建生命周期中有一系列插件在做合適的時(shí)機(jī)做合適事情，比如UglifyPlugin會(huì)在loader轉(zhuǎn)換遞歸完對(duì)結(jié)果使用UglifyJs壓縮覆蓋之前的結(jié)果。
webpack系列--淺析webpack的原理
