資訊專欄INFORMATION COLUMN
摘要：調(diào)用的目的是為了注冊你的邏輯指定一個(gè)綁定到自身的事件鉤子。這個(gè)對象在啟動時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括，和。對象代表了一次資源版本構(gòu)建。一個(gè)對象表現(xiàn)了當(dāng)前的模塊資源編譯生成資源變化的文件以及被跟蹤依賴的狀態(tài)信息。
引言
在上一篇文章Tapable中介紹了其概念和一些原理用法,和這次討論分析webpack plugin的關(guān)聯(lián)很大。下面從實(shí)現(xiàn)一個(gè)插件入手。demo插件
function FileListPlugin(options) {}
FileListPlugin.prototype.apply = function(compiler) {
compiler.plugin("emit", function(compilation, callback) {
var filelist = "In this build:
";
for (var filename in compilation.assets) {
filelist += ("- "+ filename +"
");
}
compilation.assets["filelist.md"] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
};
callback();
});
};
module.exports = FileListPlugin;
說明 demo例子參考了webpack的官方文檔,使用這個(gè)簡短的demo作為我們分析的入口,一步一步來分析。
首先我們寫插件都是這種結(jié)構(gòu)形式,只有這樣webpack才能解析。而上面這個(gè)簡短的插件的作用是將build后asset目錄下的所有的文件遍歷后取出文件名,然后生成一個(gè)filelist.md文件。
原型上為什么要有apply方法呢?因?yàn)樵诎惭b插件時(shí)，apply方法會被 webpack compiler 調(diào)用一次。調(diào)用的目的是為了注冊你的邏輯,指定一個(gè)綁定到 webpack 自身的事件鉤子。
webpack的事件鉤子有很多如下所示,列舉幾個(gè)比較重要常用的的,加深下印象
compile 編譯器開始編譯
compilation 編譯器開始一個(gè)新的編譯過程
emit 在生成資源并輸出到目錄之前
done 完成編譯
查看更多事件鉤子
在上一篇文章中分析談到過compiler是繼承自tapable,正是因?yàn)樗黰ix了Tapable 類，才具備注冊和調(diào)用插件功能,而執(zhí)行plugin方法其實(shí)就相當(dāng)hook.tap(tapOpt, options.fn)進(jìn)行存儲, 然后webpack在啟動運(yùn)行期間,到達(dá)某個(gè)階段,就會觸發(fā)調(diào)用相應(yīng)的事件。額外傳入一個(gè) callback 回調(diào)函數(shù),只有在插件中操作是異步的時(shí)候才需要,同步操作不需要傳入和執(zhí)行這個(gè)callback。
還有一點(diǎn)需要注意的是compiler和compilation區(qū)別?
compiler 對象代表了完整的 webpack 環(huán)境配置。這個(gè)對象在啟動 webpack 時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括 options，loader 和 plugin。當(dāng)在 webpack 環(huán)境中應(yīng)用一個(gè)插件時(shí)，插件將收到此 compiler 對象的引用?？梢允褂盟鼇碓L問 webpack 的主環(huán)境。安裝使用compilation 對象代表了一次資源版本構(gòu)建。當(dāng)運(yùn)行 webpack 開發(fā)環(huán)境中間件時(shí)，每當(dāng)檢測到一個(gè)文件變化，就會創(chuàng)建一個(gè)新的 compilation，從而生成一組新的編譯資源。一個(gè) compilation 對象表現(xiàn)了當(dāng)前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態(tài)信息。compilation 對象也提供了很多關(guān)鍵時(shí)機(jī)的回調(diào)，以供插件做自定義處理時(shí)選擇使用。
const FileListPlugin = require("fileList");
module.exports = {
entry: "./src/main.js",
output:{
path: path.join(__dirname,"dist"),
filename: "[name].js"
},
plugins: [
new FileListPlugin({options: true})
]
}
輸出結(jié)果
demo完整鏈接
參考鏈接
https://doc.webpack-china.org...
https://doc.webpack-china.org...
https://webpack.js.org/contri...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93812.html
摘要：用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。甚至允許你直接在模塊中文件和區(qū)別之前一篇文章中介紹了機(jī)制和今天研究的對象他們兩者在一起極大的拓展了的功能。原理說明上面是源碼中執(zhí)行關(guān)鍵步驟遞歸的方式執(zhí)行執(zhí)行機(jī)流程似于中間件機(jī)制參考源碼參考文檔 loader概念 loader是用來加載處理各種形式的資源,本質(zhì)上是一個(gè)函數(shù), 接受文件作為參數(shù),返回轉(zhuǎn)化后的結(jié)構(gòu)。 loader 用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。loa...
摘要：注冊方法之后，當(dāng)執(zhí)行了當(dāng)前的，那么掛載正在當(dāng)前上的方法就會被執(zhí)行。比如在開始編譯之前，就能觸發(fā)鉤子，就用到了當(dāng)前的。上面都是前置知識，下面通過解讀一個(gè)源碼來鞏固下。先看一段簡單的源碼。，是眾多的的一個(gè)，官網(wǎng)的解釋是編譯創(chuàng)建之后，執(zhí)行插件。 通過解讀webpack-manifest-plugin，了解下plugin機(jī)制 先簡單說一下這個(gè)插件的功能，生成一份資源清單的json文件，如下 s...
摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開始分析初始化這個(gè)階段整體流程做了什么啟動構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡介源碼之機(jī)制參考源碼 引言 通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開始分析 初始化 這個(gè)階段整體流程做了什么? 啟動構(gòu)建，讀...
摘要：它的行為和的方法相似，用來注冊一個(gè)處理函數(shù)監(jiān)聽器，來在信號事件發(fā)生時(shí)做一些事情他最終還是調(diào)用進(jìn)行存儲。而就全部取出來執(zhí)行?？偨Y(jié)上面這些知識是理解插件和運(yùn)行原理的前置條件更多內(nèi)容待下次分解參考源碼版本說明參考鏈接 引言 去年3月的時(shí)候當(dāng)時(shí)寫了一篇webpack2-update之路,到今天webpack已經(jīng)到了4.2,更新挺快的,功能也在不斷的完善,webpack4特性之一就是零配置, w...
摘要：流程劃分縱觀整個(gè)打包過程，可以流程劃分為四塊。核心類關(guān)系圖功能實(shí)現(xiàn)模塊通過將源碼解析為樹并拆分，以及直至基礎(chǔ)模塊。通過的依賴和切割文件構(gòu)建出含有和包含關(guān)系的對象。通過模版完成主入口文件的寫入，模版完成切割文件的寫入。 前言 插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個(gè)編譯過程。plugin在編譯的關(guān)鍵地方觸發(fā)對應(yīng)的事件，極大的...
閱讀 1407·2021-09-01 11:40
閱讀 4048·2021-08-05 10:03
閱讀 1028·2019-08-30 15:54
閱讀 2890·2019-08-29 12:53
閱讀 3262·2019-08-29 12:23
閱讀 999·2019-08-26 13:45
閱讀 2337·2019-08-26 10:41
閱讀 2601·2019-08-23 16:44
