案例實戰之如何寫乙個webpack plugin

案例實戰之如何寫乙個webpack plugin

// 生成乙個目錄專案目錄的資料夾

class filelistplugin 
compiler.hooks.emit.tap('filelistplugin', (compilation) => —— $kb\r\n`
})console.log('====content====', content)
assets[this.options.filename] = ,
size() }})
}}module.exports = filelistplugin

const filelistplugin = require('./plugins/filelistplugin.js')

plugins:[
new filelistplugin(),
]

}webpack 的原始碼compiler鉤子函式是借助tapable庫實現的

const  = require("tapable");

class compiler extends tapable */
shouldemit: new syncbailhook(["compilation"]),
/** @type */
done: new asyncserieshook(["stats"]),
/** @type */
additionalpass: new asyncserieshook(),
/** @type */
beforerun: new asyncserieshook(["compiler"]),
/** @type */
run: new asyncserieshook(["compiler"]),
/** @type */
emit: new asyncserieshook(["compilation"]),
/** @type */
assetemitted: new asyncserieshook(["file", "content"]),
/** @type */
afteremit: new asyncserieshook(["compilation"]),
/** @type */
thiscompilation: new synchook(["compilation", "params"]),
/** @type */
compilation: new synchook(["compilation", "params"]),
/** @type */
normalmodulefactory: new synchook(["normalmodulefactory"]),
/** @type */
contextmodulefactory: new synchook(["contextmodulefactory"]),
/** @type */
beforecompile: new asyncserieshook(["params"]),
/** @type */
compile: new synchook(["params"]),
/** @type */
make: new asyncparallelhook(["compilation"]),
/** @type */
aftercompile: new asyncserieshook(["compilation"]),
/** @type */
watchrun: new asyncserieshook(["compiler"]),
/** @type */
failed: new synchook(["error"]),
/** @type */
invalid: new synchook(["filename", "changetime"]),
/** @type */
watchclose: new synchook(),
/** @type */
infrastructurelog: new syncbailhook(["origin", "type", "args"]),
// todo the following hooks are weirdly located here
// todo move them for webpack 5
/** @type */
environment: new synchook(),
/** @type */
afterenvironment: new synchook(),
/** @type */
afterplugins: new synchook(["compiler"]),
/** @type */
afterresolvers: new synchook(["compiler"]),
/** @type */
entryoption: new syncbailhook(["context", "entry"])
};}}

如何寫乙個Stack？

1.棧是陣列 2.先進後出 3.出棧 4.入棧 手寫乙個雙向鍊錶 棧 public class stackpopandpush public stackpopandpush int lens 返回元素個數 public intsize 返回陣列長度，容量，棧資料長 private intcapaci...

如何寫乙個鍊錶

有的時候，處於記憶體中的資料並不是連續的。那麼這時候，我們就需要在 資料結構中新增乙個屬性，這個屬性會記錄下面乙個資料的位址。有了這個位址之後，所有的資料就像一條鍊子一樣串起來了，那麼這個位址屬性就起到了穿線鏈結的作用。相比較普通的線性結構，鍊錶結構的優勢是什麼呢？我們可以總結一下 1 單個節點建立...

如何寫乙個Vue元件

寫的是以.vue結尾的單檔案元件的寫法，是基於webpack構建的專案。template 模板 js 邏輯 css 樣式 每個元件都有屬於自己的模板，js和樣式。如果將乙個頁面比喻成一間房子的話，元件就是房子裡的客廳 臥室 廚房 廁所。如果把廚房單獨拿出來的話，元件又可以是刀 油煙機.等等。就是說頁...