淺談Webpack4 plugins 實現原理
阿新 • • 發佈：2021-09-27
目錄
- 前言
- 認識
- 實踐出真知
前言
在 wabpack 中核心功能除了 loader 應該就是 plugins 外掛了，它是在webpack執行過程中會廣播一系列事件，plugin 會監聽這些事件並通過 webpack Api 對輸出檔案做對應的處理， 如 hmlt-webpack-plugin 就是對模板魔劍 index.html 進行拷貝到 dist 目錄的
認識
先來通過原始碼來認識一下 plugins 的基本結構
https://www.cppcns.com.com/webpack/webpack/blob/webpack-4/lib/Compiler. 551行
// 建立一個編譯器
createChildCompiler(
compilation,compilerName,compilerIndex,outputOptions,plugins // 裡邊就有包含外掛
) {
// new 一個 編譯器
const childCompiler = new Compiler(this.context);
// 尋找存在的所有 plugins 外掛
if (Array.isArray(plugins)) {
for (const plugin of plugins) {
// 如果存在， 就呼叫 plugin 的 apply 方法
plugin.apply(childCompiler);
}
}
// 遍歷尋找 plugin 對應的 hooks
for (const name in this.hooks) {
if (
![
"make","compile","emit","afterEmit","invalid","done","thisCompilation"
].includes(name)
) {
// 找到對應的 hooks 並呼叫，
if (childCompiler.hooks[name]) {
childCompiler.hooks[name].taps = this.hooks[name].taps.slice();
}
}
}
// .... 省略 ....
return childCompiler;
}
通過上述原始碼可以看出來 plugin 本質就是一個類， 首先就是 new 一個 compiler 類，傳入當前的上下文，然後判斷是否存在，存在則直接呼叫對應 plugin 的 apply 方法，然後再找到對應 plugin 呼叫的 hooks 事件流,發射給對應 hooks 事件
hooks 哪裡來的 ?
https://github.com/webpack/webpack/blob/webpack-4/lib/Compiler.js 42行
// 上述的 Compiler 類繼承自 Tapable 類，而 Tapable 就定義了這些 hooks 事件流
class Compiler extends Tapable {
constructor(context) {
super();
this.hooks = {
/** @type {SyncBailHook<Compilation>} */
shouldEmit: new SyncBailHook(["compilation"]),/** @type {AsyncSeriesHook<Stats>} */
done: new AsyncSeriesHook(["stats"]),/** @type {AsyncSeriesHook<>} */
additionalPass: new AsyncSeriesHook([]),/** @type {AsyncSeriesHook<Compiler>} */
beforeRun: new AsyncSeriesHook(["compilerwww.cppcns.com 好了，瞭解過基本的結構之後，就可以推理出 plugin 基本的結構和用法了，就是下邊這樣
// 定義一個 plugins 類
class MyPlugins {
// 上邊有說 new 一個編譯器例項，會執行例項的 apply 方法，傳入對應的 comiler 例項
apply (compiler) {
// 呼叫 new 出來 compiler 例項下的 hooks 事件流，通過 tab 觸發，並接收一個回撥函式
compiler.hooks.done.tap('一般為外掛暱稱',(預設接收引數) => {
console.log('進入執行體');
})
}
}
// 匯出
module.exports = MyPlugins
ok,以上就是一個簡單的 模板 ，我們來試試內部的鉤子函式，是否會如願以償的被呼叫和觸發
配置 webpack
let path = require('path')
let DonePlugin = require('./plugins/DonePlugins')
let AsyncPlugins = require('./plugins/AsyncPlugins')
module.exports = {
mode: 'development',entry: './src/index.js',output: {
filename: 'build.js',path: path.resolve(__dirname,'dist')
},plugins: [
new DonePlugin(),// 內部同步 hooks
new AsyncPlugins() // 內部非同步 hooks
]
}
同步 plugin 外掛模擬呼叫
class DonePlugins {
apply (compiler) {
compiler.hooks.done.tap('DonePlugin',(stats) => {
console.log('執行： 編譯完成');
})
}
}
module.exports = DonePlugins
非同步 plugin 外掛模擬呼叫
class AsyncPlugins {
apply (compiler) {
compiler.hooks.emit.tapAsync('AsyncPlugin',(complete,callback) => {
setTimeout(() => {
console.log('執行：檔案發射出來');
callback()
},1000)
})
}
}
module.exports = AsyncPlugins
最後編譯 webpack 可以看到編譯控制檯，分別列印 執行: 編譯完成，執行：檔案發射出來，說明這樣是可以呼叫到 hooks 事件流的，並且可以觸發。
實踐出真知
瞭解過基本結構和使用的方式了，現在來手寫一個 plugin 外掛，嗯，就來一個檔案說明外掛吧，我們日常打包，可以打包一個 xxx.md 檔案到 dist 目錄，來做一個打包說明，就來是實現這麼一個小功能
檔案說明外掛
class FileListPlugin {
// 初始化，獲取檔案的名稱
constructor ({filename}) {
this.filename = filename
}
// 同樣的模板形式，定義 apply 方法
apply (compiler) {
compiler.hooks.emit.tap('FileListPlugin',(compilation) => {
// assets 靜態資源，可以打印出 compilation 引數，還有很多方法和屬性
let assets = compilation.assets;
// 定義輸出文件結構
let content = `## 檔名 資源大小\r\n`
// 遍歷靜態資源，動態組合輸出內容
Object.entries(assets).forEach(([filename,stateObj]) => {
content += `- ${filename} ${stateObj.size()}\r\n`
})
// 輸出資源物件
assets[this.filename] = {
source () {
return content;
},size () {
r客棧eturn content.length
}
}
})
}
}
// 匯出
module.exports = FileListPlugin
webpack 配置
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
// plugins 目錄與node_modules 同級， 自定義 plugins,與 loader 類似
let FileListPlugin = require('./plugins/FileListPlugin')
module.exports = {
mode: 'development',plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',filename: 'index.html'
www.cppcns.com}),new FileListPlugin({
filename: 'list.md'
})
]
}
ok,通過以上配置，我們再打包的時候就可以看到，每次打包在 dist 目錄就會出現一個 xxx.md 檔案，而這個檔案的內容就是我們上邊的 content
到此這篇關於淺談Webpack4 plugins 實現原理的文章就介紹到這了,更多相關Webpack4 plugins 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！