複習webpack4之如何編寫Plugin

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.如何編寫簡單的plugin

首先初始化項目

npm init -y
複製代碼

新建一個src目錄，裏面有一個index.js

安裝webpack

cnpm install -D webpack webpack-cli
複製代碼

編寫webpack配置。

在package.json中配置命令行

如今咱們想在打包結束後，在dist目錄中生成一個版權文件，要怎麼作呢？

首先，在src同級目錄下新建一個plugins的目錄，而後在新建一個copyright-webpack-plugin.js，在這個文件裏寫js。

loader導出的是一個函數，而plugin是一個類。

插件被執行的時候，會首先執行apply這個方法，它接受一個參數compiler，是webpack實例。

而後在配置中使用咱們的插件。

這也是插件使用過程當中，須要new的緣由。

有時候插件能夠傳參，咱們就能夠經過constructor的參數接收。

再回頭來寫插件。

compiler有許多鉤子，compiler.hooks.emit表明生成資源到output目錄以前的鉤子。由於這是一個異步操做，因此後面跟着一個tapAsync

compilation裏面有一個assets，包括本次打包生成的資源，如今已經有一個main.js，咱們再添加一個copyright.txt，source表明文件中的內容，size表明文件大小，而後最後要調用cb()這個函數。

查看打包生成的文件。

若是寫同步，就須要這麼寫。

同步的鉤子後面只接tap就能夠了，而且不用手動調用cb。

開發過程當中，咱們怎麼快速知道compiler裏面都包括什麼內容？能夠開啓調試模式。

其實這個命令和npm run build沒有區別，可是咱們用node就能夠傳遞參數。

加完參數後，運行npm run debug，打開瀏覽器，打開控制檯，會發現多了一個webpack操做按鈕。

點擊後會出現webpack打包過程的調試界面。

如今咱們去手動打一個斷點。

而後從新執行npm run debug，執行相同的步驟。

默認會處在第一個斷點，而後執行下一個斷點就會來到咱們手動打的斷點中。

這樣就能夠快速看到compilation包括什麼內容了。

具體的仍是須要去官網，對照着看才能夠深刻使用。