項(xiàng)目github地址：https://github.com/Trade-Offf/LoaderAndPlugin
上圖為markdown Loader的文件結(jié)構(gòu)：
- dist是打包后的內(nèi)容距糖；
- node_modules是文件依賴车吹，git clone 項(xiàng)目之后記得 npm i 安裝依賴跨释；
-
src是核心功能，里面有一個.md文件，一個js文件。js負(fù)責(zé)console .md文件；
直接在JS里不能輸出.md文件
但在node環(huán)境下不能通過js直接輸出.md文件，所以要經(jīng)過處理姻氨，
方法一：JS內(nèi)部處理
JS內(nèi)部處理
方法二：寫個Loader加載器
所以我們還可以用多個Loader進(jìn)行處理：
markdown-loader2 中直接返回 HTML 字符串，再安裝一個處理 HTML 的 Loader功戚，叫作 html-loader娶眷。在webpack.config.js里把module的 use 屬性修改為一個數(shù)組，以便依次使用多個 Loader啸臀。
P.S. 此時(shí)注意執(zhí)行順序是從后往前届宠，所以要先返回HTML，再處理HTML；
以上豌注，我們用兩種方式伤塌，實(shí)現(xiàn)了一個markdown Loader；
相比于 Loader轧铁，插件的能力范圍更寬每聪，因?yàn)?Loader 只是在模塊的加載環(huán)節(jié)工作，而插件的作用范圍幾乎可以觸及 Webpack 工作的每一個環(huán)節(jié)齿风。
那么插件機(jī)制如何實(shí)現(xiàn)呢熊痴？很簡單，類似軟件開發(fā)中的鉤子機(jī)制聂宾；
在Webpack整個工作過程中會有很多環(huán)節(jié)，每個環(huán)節(jié)都埋下了鉤子诊笤，在開發(fā)時(shí)不同節(jié)點(diǎn)掛載不同任務(wù)系谐，即可實(shí)現(xiàn)擴(kuò)展Webpack的能力；
接下來我想開發(fā)一個自動清除Webpack打包結(jié)果中的注釋讨跟，讓bundle.js更易讀纪他；
Webpack 要求我們的插件必須是一個函數(shù)或者是一個包含 apply 方法的對象，一般我們都會定義一個類晾匠，在這個類中定義 apply 方法茶袒。然后在使用時(shí)，再通過這個類來創(chuàng)建一個實(shí)例對象去使用這個插件凉馆。
所以我們這里定義一個 RemoveCommentsPlugin 類型薪寓，然后在這個類型中定義一個 apply 方法，這個方法會在 Webpack 啟動時(shí)被調(diào)用澜共，它接收一個 compiler 對象參數(shù)向叉，這個對象是 Webpack 工作過程中最核心的對象，里面包含了我們此次構(gòu)建的所有配置信息嗦董，我們就是通過這個對象去注冊鉤子函數(shù)
做完這些母谎，我們還需要知道把任務(wù)掛載到哪個鉤子上
我們的需求是刪除 bundle.js 中的注釋，也就是說只有當(dāng) Webpack 需要生成的 bundle.js 文件內(nèi)容明確過后才可能實(shí)施京革。
那根據(jù) API 文檔中的介紹奇唤，我們找到一個叫作 emit 的鉤子，這個鉤子會在 Webpack 即將向輸出目錄輸出文件時(shí)執(zhí)行匹摇，非常符合我們的需求咬扇。
我們回到代碼中，通過 compiler 對象的 hooks 屬性訪問到 emit 鉤子来惧，再通過 tap 方法注冊一個鉤子函數(shù)冗栗，這個方法接收兩個參數(shù)：
第一個是插件的名稱，我們這里的插件名稱是 RemoveCommentsPlugin；
第二個是要掛載到這個鉤子上的函數(shù)隅居；
根據(jù) API 文檔中的提示钠至，這里我們在這個函數(shù)中接收一個 compilation 對象參數(shù)，這個對象可以理解為此次運(yùn)行打包的上下文胎源，所有打包過程中產(chǎn)生的結(jié)果棉钧，都會放到這個對象中。
我們可以使用這個對象中的 assets 屬性獲取即將寫入輸出目錄的資源文件信息涕蚤，它是一個對象宪卿，我們這里通過 for in 去遍歷這個對象，其中鍵就是每個文件的名稱万栅，我們嘗試把它打印出來;
能夠拿到文件名后佑钾，我們回到代碼中。這里需要先判斷文件名是不是以 .js 結(jié)尾烦粒，因?yàn)?Webpack 打包還有可能輸出別的文件休溶，而我們的需求只需要處理 JS 文件。
那如果是 JS 文件扰她，我們將文件內(nèi)容得到兽掰，再通過正則替換的方式移除掉代碼中的注釋，最后覆蓋掉 compilation.assets 中對應(yīng)的對象徒役，在覆蓋的對象中孽尽，我們同樣暴露一個 source 方法用來返回新的內(nèi)容。另外還需要再暴露一個 size 方法忧勿，用來返回內(nèi)容大小杉女，這是 Webpack 內(nèi)部要求的格式，具體代碼如下：
此時(shí)的bundle.js文件如圖狐蜕，實(shí)現(xiàn)需求：
以上就是我們實(shí)現(xiàn)一個移除注釋插件的過程宠纯，通過這個過程我們了解了：插件都是通過往 Webpack 生命周期的鉤子中掛載任務(wù)函數(shù)實(shí)現(xiàn)的。
