項(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是核心功能，里面有一個(gè).md文件，一個(gè)js文件。js負(fù)責(zé)console .md文件；
直接在JS里不能輸出.md文件
但在node環(huán)境下不能通過js直接輸出.md文件，所以要經(jīng)過處理，
方法一：JS內(nèi)部處理
JS內(nèi)部處理
方法二：寫個(gè)Loader加載器
所以我們還可以用多個(gè)Loader進(jìn)行處理：
markdown-loader2 中直接返回 HTML 字符串，再安裝一個(gè)處理 HTML 的 Loader，叫作 html-loader。在webpack.config.js里把module的 use 屬性修改為一個(gè)數(shù)組，以便依次使用多個(gè) Loader。
P.S. 此時(shí)注意執(zhí)行順序是從后往前，所以要先返回HTML，再處理HTML；
以上，我們用兩種方式，實(shí)現(xiàn)了一個(gè)markdown Loader；
相比于 Loader，插件的能力范圍更寬，因?yàn)?Loader 只是在模塊的加載環(huán)節(jié)工作，而插件的作用范圍幾乎可以觸及 Webpack 工作的每一個(gè)環(huán)節(jié)。
那么插件機(jī)制如何實(shí)現(xiàn)呢？很簡單，類似軟件開發(fā)中的鉤子機(jī)制；
在Webpack整個(gè)工作過程中會有很多環(huán)節(jié)，每個(gè)環(huán)節(jié)都埋下了鉤子，在開發(fā)時(shí)不同節(jié)點(diǎn)掛載不同任務(wù)，即可實(shí)現(xiàn)擴(kuò)展Webpack的能力；
接下來我想開發(fā)一個(gè)自動清除Webpack打包結(jié)果中的注釋，讓bundle.js更易讀；
Webpack 要求我們的插件必須是一個(gè)函數(shù)或者是一個(gè)包含 apply 方法的對象，一般我們都會定義一個(gè)類，在這個(gè)類中定義 apply 方法。然后在使用時(shí)，再通過這個(gè)類來創(chuàng)建一個(gè)實(shí)例對象去使用這個(gè)插件。
所以我們這里定義一個(gè) RemoveCommentsPlugin 類型，然后在這個(gè)類型中定義一個(gè) apply 方法，這個(gè)方法會在 Webpack 啟動時(shí)被調(diào)用，它接收一個(gè) compiler 對象參數(shù)，這個(gè)對象是 Webpack 工作過程中最核心的對象，里面包含了我們此次構(gòu)建的所有配置信息，我們就是通過這個(gè)對象去注冊鉤子函數(shù)
做完這些，我們還需要知道把任務(wù)掛載到哪個(gè)鉤子上
我們的需求是刪除 bundle.js 中的注釋，也就是說只有當(dāng) Webpack 需要生成的 bundle.js 文件內(nèi)容明確過后才可能實(shí)施。
那根據(jù) API 文檔中的介紹，我們找到一個(gè)叫作 emit 的鉤子，這個(gè)鉤子會在 Webpack 即將向輸出目錄輸出文件時(shí)執(zhí)行，非常符合我們的需求。
我們回到代碼中，通過 compiler 對象的 hooks 屬性訪問到 emit 鉤子，再通過 tap 方法注冊一個(gè)鉤子函數(shù)，這個(gè)方法接收兩個(gè)參數(shù)：
第一個(gè)是插件的名稱，我們這里的插件名稱是 RemoveCommentsPlugin；
第二個(gè)是要掛載到這個(gè)鉤子上的函數(shù)；
根據(jù) API 文檔中的提示，這里我們在這個(gè)函數(shù)中接收一個(gè) compilation 對象參數(shù)，這個(gè)對象可以理解為此次運(yùn)行打包的上下文，所有打包過程中產(chǎn)生的結(jié)果，都會放到這個(gè)對象中。
我們可以使用這個(gè)對象中的 assets 屬性獲取即將寫入輸出目錄的資源文件信息，它是一個(gè)對象，我們這里通過 for in 去遍歷這個(gè)對象，其中鍵就是每個(gè)文件的名稱，我們嘗試把它打印出來;
能夠拿到文件名后，我們回到代碼中。這里需要先判斷文件名是不是以 .js 結(jié)尾，因?yàn)?Webpack 打包還有可能輸出別的文件，而我們的需求只需要處理 JS 文件。
那如果是 JS 文件，我們將文件內(nèi)容得到，再通過正則替換的方式移除掉代碼中的注釋，最后覆蓋掉 compilation.assets 中對應(yīng)的對象，在覆蓋的對象中，我們同樣暴露一個(gè) source 方法用來返回新的內(nèi)容。另外還需要再暴露一個(gè) size 方法，用來返回內(nèi)容大小，這是 Webpack 內(nèi)部要求的格式，具體代碼如下：
此時(shí)的bundle.js文件如圖，實(shí)現(xiàn)需求：
以上就是我們實(shí)現(xiàn)一個(gè)移除注釋插件的過程，通過這個(gè)過程我們了解了：插件都是通過往 Webpack 生命周期的鉤子中掛載任務(wù)函數(shù)實(shí)現(xiàn)的。
