簡(jiǎn)答題

1.Webpack 的構(gòu)建流程主要有哪些環(huán)節(jié)？如果可以請(qǐng)盡可能詳盡的描述 Webpack 打包的整個(gè)過(guò)程。

解：
初始化參數(shù):
??????根據(jù)用戶在命令窗口輸入的參數(shù)以及webpack.js文件的配置，得到最后的配置。
開(kāi)始編譯:
??????根據(jù)上一步得到的最終配置初始化得到一個(gè)compiler對(duì)象，注冊(cè)所有的插件plugins，插入開(kāi)始監(jiān)聽(tīng)webpack構(gòu)建過(guò)程的生命周期的環(huán)節(jié)（事件），不同的環(huán)節(jié)會(huì)有相應(yīng)的處理，然后開(kāi)始執(zhí)行編譯。
確定入口:
??????根據(jù)webpack.config.js文件的entry入口，開(kāi)始解析文件構(gòu)建AST語(yǔ)法書，找出依賴，遞歸下去。
編譯模塊:
??????地柜過(guò)程中，根據(jù)文件類型和loader配置，調(diào)用相應(yīng)的loader對(duì)不同的文件做不同的轉(zhuǎn)換處理，再找出改模塊依賴的模塊，然后遞歸本步驟，知道項(xiàng)目中依賴的所有模塊都經(jīng)過(guò)本步驟的編譯處理。
??????編譯過(guò)程中，有一系列的插件在不同的環(huán)節(jié)做相應(yīng)的事情，比如UglifyPlugin會(huì)在loader轉(zhuǎn)換地柜對(duì)結(jié)果使用UglifyJs壓縮覆蓋之前的結(jié)果；再比如clean-webpack-plugin，會(huì)在結(jié)果輸出之前清除dist目錄等等。
完成編譯并輸出:
??????遞歸結(jié)束后，得到每個(gè)文件結(jié)果，包含轉(zhuǎn)換后的模塊以及他們之間的依賴關(guān)系，根據(jù)entry以及output等配置生成代碼塊chunk。
打包完成:
??????根據(jù)output輸出所有的chunk想用的文件目錄。

2.Loader 和 Plugin 有哪些不同？請(qǐng)描述一下開(kāi)發(fā) Loader 和 Plugin 的思路。

解：
兩者的不同點(diǎn):
??????Loader,直譯為“加載器”，主要用來(lái)解析和檢測(cè)對(duì)應(yīng)資源，負(fù)責(zé)源文件從輸入到輸出的轉(zhuǎn)換，它專注于實(shí)現(xiàn)資源模塊加載。
??????Plugin,直譯為“插件”，主要通過(guò)webpack內(nèi)部的鉤子機(jī)制，在webpack構(gòu)建的不同階段執(zhí)行一些額外的工作，它的插件是一個(gè)函數(shù)或者一個(gè)包含apply方法的對(duì)象，接受有個(gè)compile對(duì)象，通過(guò)webpack的鉤子來(lái)處理資源。
Loader開(kāi)發(fā)思路:
??????1.通過(guò)module.exports到處一個(gè)函數(shù)
??????2.該函數(shù)默認(rèn)一個(gè)參數(shù)source（即要處理的資源文件）
??????3.在函數(shù)體中處理資源（loader里配置響應(yīng)的loader后）
??????4.通過(guò)return返回最終打包后的結(jié)果（這里的返回結(jié)果需要字符串形式）
Plugin開(kāi)發(fā)思路:
??????1.通過(guò)鉤子機(jī)制實(shí)現(xiàn)
??????2.插件必須是一個(gè)函數(shù)或是包含apply方法的對(duì)象
??????3.在方法體內(nèi)通過(guò)webpack提供的API獲取資源做響應(yīng)處理
??????4.將處理玩的資源通過(guò)webpack提供的方法返回資源

編程題

使用 Webpack 實(shí)現(xiàn) Vue 項(xiàng)目打包任務(wù)

解：
??????作業(yè)快速跳轉(zhuǎn)：使用 Webpack 實(shí)現(xiàn) Vue 項(xiàng)目打包任務(wù)作業(yè)