作為一個(gè)資深的摸魚小能手，班我們每天要上，終端也是我們也要每天要用到的，那么有什么辦法可以在控制臺(tái)終端中去摸魚呢？在接下來(lái)的文章中，我們就來(lái)看看它可以做到怎么樣摸魚？

一、簡(jiǎn)介

在我們開(kāi)發(fā)的項(xiàng)目中，幾乎有很多項(xiàng)目要都是使用webpack?作為構(gòu)建工具來(lái)進(jìn)行開(kāi)發(fā)的，在它進(jìn)行構(gòu)建的時(shí)候，會(huì)有一些信息會(huì)輸出在控制臺(tái)上面，如下圖所示：

愛(ài)瞎折騰的朋友們可能就會(huì)想了，為什么?create-react-pp?也是用的 webpack 作為構(gòu)建工具，為什么我的輸出和它的輸出是不一樣的呢？

2、Compiler

通過(guò)查閱文檔，我發(fā)現(xiàn)了問(wèn)題所在，原來(lái)在 webpack 中它提供了一個(gè)?compiler?鉤子，它用來(lái)監(jiān)控文件系統(tǒng)的監(jiān)聽(tīng)(watching) 機(jī)制，并且在文件修改時(shí)重新編譯。?當(dāng)處于監(jiān)聽(tīng)模式(watch mode)時(shí)， compiler 會(huì)觸發(fā)諸如watchRun, watchClose 和 invalid?等額外的事件。

done 鉤子就是當(dāng)我們的代碼被編譯完成的時(shí)候被調(diào)用的。

3、如何調(diào)用 done 鉤子

要想調(diào)用我們的 done 鉤子，首先我們要引入?webpack 包，并把 webpack 配置傳遞給 webpack 函數(shù)，如下圖所示：

接下來(lái)我們看看終端輸出：

這些就是我們的一些 webpack 配置，在這個(gè) compiler 對(duì)象上，它存在一個(gè)?hooks?對(duì)象，如下代碼所示：

它會(huì)在代碼編譯完成階段調(diào)用該回調(diào)函數(shù):

咦，你會(huì)發(fā)現(xiàn)了，代碼編譯執(zhí)行完成，我的終端上的輸出會(huì)這么干凈，是因?yàn)樵谳敵隹刂婆_(tái)之前， 已經(jīng)被我調(diào)用了一個(gè)函數(shù)清空了。

通過(guò)這個(gè)函數(shù)，你可以情況控制臺(tái)上的一些輸出信息，如下代碼所示：

再調(diào)用一下，你會(huì)發(fā)現(xiàn)控制臺(tái)上面很干凈的，圖如下圖所示：

要想這一些個(gè)性化的輸出,我們直接在這個(gè)回調(diào)函數(shù)中打印輸出就可以了，如果你要你輸出的信息和項(xiàng)目中的信息有關(guān)，你可以利用?stats?這個(gè)參數(shù)：

4、總結(jié)

如果你的項(xiàng)目是使用的 webpack，并且要想在項(xiàng)目的開(kāi)發(fā)中自定義，你可以通過(guò) compiler.hooks 的方式去監(jiān)聽(tīng)不同的鉤子，然后通過(guò)不同的方式來(lái)實(shí)現(xiàn)不同的信息輸出。

作者：Moment

版權(quán)聲明：圖片及文章版權(quán)均來(lái)源于原作者，藍(lán)橋云課僅做分享使用，如有侵權(quán)，聯(lián)系刪除