webpack loader和外掛程式的編寫原理

2022-02-02 01:58:01 字數 2007 閱讀 6317

webpack自定義loader和外掛程式的api**:

點選頂部api,看左側api:

1. 如何編寫乙個loader

實現的功能是:把js**中的lee改成delllee

this.query 獲取options的name;

如果loader中有非同步:

這裡注意

1:使用this.async() 告訴有非同步**;

2:把非同步返回的result放在callback中;

3:loader-utils 是乙個npm i loader-utils -d 安裝的外掛程式,便於獲取webpack.config.js 中配置loader的options;

4: 其中callback也是乙個api,可以傳入四個引數,

乙個可以同步或者非同步呼叫的可以返回多個結果的函式。預期的引數是:

this.callback(

err: error | null,

content: string | buffer,

sourcemap?: sourcemap,

meta?: any

);

第乙個引數必須是error或者null第二個引數是乙個string或者buffer

可選的:第三個引數必須是乙個可以被這個模組解析的 source map。

可選的:第四個選項,會被 webpack 忽略,可以是任何東西(例如一些元資料)

配置檔案中簡化路徑:

使用resolveloader可以配置loader的路徑;先去 node_modules中找,再去./loaders資料夾中找

webpack 外掛程式的編寫:

//compiler是webpack配置的例項,compilation是本次打包的例項

console.log(1212);

中存放的是本次打包生成的檔案資訊

在生成的檔案陣列中增加新的txt檔案

source:function(),

size:

function

() }

cd();

//使用了非同步函式 tabasync ,一定要在這裡用cd**函式

} }

}外掛程式是乙個類,最後打包生成兩個檔案

下面看乙個同步的時刻:

同步的不用傳**函式cd

console.log('hello');}}}

通過在**中增加 debugger 進行除錯,並且在控制台檢視相應的變數:

編寫乙個webpack loader

loader是一種打包的方案,webpack預設只識別js結尾的檔案,當遇到其他格式的檔案後,webpack並不知道如何去處理。此時,我們可以定義一種規則,告訴webpack當他遇到某種格式的檔案後,去求助於相應的loader。新建loaders資料夾並建立三個loaders檔案 remove co...

webpack loader 生成虛擬檔案的方案

此文已由作者張磊授權網易雲社群發布。使用 webpack 的時候,難免需要寫一些 loader,接著就會遇到乙個很糾結的問題。該 loader 會生成乙個檔案,一般這個檔案的生成時機都是在 loader 處理所有的檔案後。一般有兩種處理方案。一種是寫乙個 plugin,監聽對應的事件 一種是生成乙個...

頭插法和尾插法

頭插法 初始化頭節點 lk init headnode 資料域可以不用維護 headnode next null return headnode 頭插法 void insert linklist lk headnode,int length int val 0 int index 0 for int...