Webpack 自定義外掛程式

1，webpack背景知識

一款前端專案開發構建工具。或者用gulp。

前後端分離的開發環境，解析不同的資源檔案，統一打包分包，按需載入，**優化等。

主要構成，入口/出口，loader和plugins、model、rules等配置，webpack自身提供外掛程式如：分析、壓縮、html、 provider等。

自定義的plugins，需要了解一些模組化、語法樹、compiler、compilation、

2，webpack 自定義外掛程式的開發

2.1、建立乙個plugins

構建函式

指定webpack自身的事件鉤子

處理webpack內部例項的特定資料

功能完成後，呼叫webpack提供的**

function myplugin ()

compiler.plugin('webpackseventhook', function(compilation,callback) );

}2.2、webpack外掛程式的鉤子函式

webpack在打包過程中有自己的生命週期函式，webpack打包過程做了分類，於是就有了很多不同型別的外掛程式。

其中有兩個重要的物件：compilation，compiler

compiler 包含webpack的所有配置資訊（webpack.config.js），作為 webpack 的例項在啟動時被初始化。

compilation 包含當前模組，編譯檔案，例如在開發環境，當檔案發生變化，就會有乙個新的 compilation。

以下內容就是乙個webpack的自定義外掛程式。

function

myplugin(options) 
(compiler) )
compiler.plugin(
'compilation', function
(compilation) )
})compiler.plugin(
'done', function
() )
};module.exports = myplugin;

舉例說明，通過emit鉤子獲取編譯後塊檔案包含的路徑，webpack高版本api有變化不支援，使用webpack2.

compiler.plugin('emit', function

(compilation, callback) )
})})
//emit 是非同步事件，asyncserieshook，非同步事件都需要呼叫callback。有點像英語裡的及物動詞和不及物動詞
callback();
})

webpack 編寫自定義外掛程式方式簡單介紹

使用 webpack api 中的 compiler 鉤子，可以在特定的時期進行操作 compiler 模組是 webpack 的支柱引擎，它通過 cli 或 node api 傳遞的所有選項，建立出乙個 compilation 例項。它擴充套件 extend 自 tapable 類，以便註冊和呼叫...

自定義外掛程式

自定義外掛程式 建立自定義外掛程式1.建立工程 qt4 designer plugin 後續配置都使用預設值，這裡我們建立乙個 qhist 外掛程式。2.新建後，直接編譯，會產生如下錯誤 1 link fatal error lnk1181 cannot open input file qtdesi...

自定義外掛程式

工具類方法 擴充套件的語法 extend 呼叫 方法名 物件級別的方法 擴充套件語法 fn.extend 呼叫 選擇器 方法名 工具類 工具類方法 extend extend rtrim function str randomcode function num else if num 4 retur...