場景：面試的時(shí)候被反復(fù)問；做項(xiàng)目的時(shí)候?qū)Ρ镜?、線上理解不夠；

參考：慕課視頻webpack4.0，書《深入學(xué)習(xí)webpack》；公司項(xiàng)目代碼

總結(jié)：這個(gè)webpack的學(xué)習(xí)，我大概是2月份開始的，一共花費(fèi)了一個(gè)月左右看完視頻，視頻里面的課后作業(yè)是看webpack官網(wǎng)對應(yīng)課程的內(nèi)容，看完視頻，官網(wǎng)差不多也看了一遍；3月份開始看書，大概也是花了一個(gè)月時(shí)間看完的，看書的時(shí)候，結(jié)合之前看視頻的筆記，把書上提到的實(shí)戰(zhàn)都自己一點(diǎn)一點(diǎn)做了一下；4月份的時(shí)候，搭建了webapck本地項(xiàng)目，寫了loader、plugin，實(shí)現(xiàn)啟動(dòng)指定頁面。

????接下來主要講一下4月份做得事情，前面的視頻和書的學(xué)習(xí)就不贅述了。

先講webpack的本地搭建

1、新建3個(gè)文件

????其中，Index.html中有id為app的div標(biāo)簽用于show方法里面獲取標(biāo)簽，main.js中引入了showwebpack的方法；

2、安裝webpack和webpack-cli的腳手架

3、npm init初始化項(xiàng)目，生成package.json文件

4、在package.json中新增“scripts”腳本

5、npx webapck/npm run dev打包

或者

6、在index.html將打包文件引入

打開index.html

寫webpack-Loader

????loader主要是對源件進(jìn)行一個(gè)翻譯轉(zhuǎn)化；

????職責(zé)單一，只需關(guān)心輸入輸出，如果一個(gè)源文件需要多步轉(zhuǎn)換，就通過多個(gè)Loader鏈?zhǔn)巾樞驁?zhí)行實(shí)現(xiàn)；

????可以通過Npm安裝，也可以通過Npm link或者resolveLoader實(shí)現(xiàn)加載本地Loader；

寫的loader內(nèi)容：

webpack.dev.config.js中相關(guān)配置：

寫webpack-Plugin

????webpack運(yùn)行的生命周期中會(huì)廣播很多事件，Plugin可以監(jiān)聽這些時(shí)間，在合適的時(shí)機(jī)，通過Webpack提供的API改變輸出結(jié)果。

實(shí)現(xiàn)啟動(dòng)某一個(gè)頁面

????在項(xiàng)目中，不是每次用devserver起服務(wù)，都需要啟動(dòng)每一個(gè)頁面的，一般都是啟動(dòng)指定路徑的頁面就可以了。這里寫了一個(gè)方法，簡單邏輯是：先獲取代碼輸入的文件路徑，生成一個(gè)正則表達(dá)式；遍歷所有文件entries，只要正則匹配不到的路徑全部刪除。

第一步：獲取到本項(xiàng)目的所有entries對象

第二步：獲取到輸入語句中的路徑 --path形式傳入

第三步：如果輸入了路徑，那么就用正則匹配獲取入口文件數(shù)組中想要到路徑

第四步：輸出需要啟動(dòng)的入口路徑

第五步：啟動(dòng)指定的單個(gè)頁面