webpack源碼之plugin機制

glumes 發布于2019-08-22 15:51 / 2997人閱讀

摘要：調用的目的是為了注冊你的邏輯指定一個綁定到自身的事件鉤子。這個對象在啟動時被一次性建立，并配置好所有可操作的設置，包括，和。對象代表了一次資源版本構建。一個對象表現了當前的模塊資源編譯生成資源變化的文件以及被跟蹤依賴的狀態信息。

引言

在上一篇文章Tapable中介紹了其概念和一些原理用法,和這次討論分析webpack plugin的關聯很大。下面從實現一個插件入手。

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的官方文檔,使用這個簡短的demo作為我們分析的入口,一步一步來分析。
首先我們寫插件都是這種結構形式,只有這樣webpack才能解析。而上面這個簡短的插件的作用是將build后asset目錄下的所有的文件遍歷后取出文件名,然后生成一個filelist.md文件。
原型上為什么要有apply方法呢?因為在安裝插件時，apply方法會被 webpack compiler 調用一次。調用的目的是為了注冊你的邏輯,指定一個綁定到 webpack 自身的事件鉤子。

webpack的事件鉤子有很多如下所示,列舉幾個比較重要常用的的,加深下印象

compile 編譯器開始編譯

compilation 編譯器開始一個新的編譯過程

emit 在生成資源并輸出到目錄之前

done 完成編譯

查看更多事件鉤子
在上一篇文章中分析談到過compiler是繼承自tapable,正是因為它mix了Tapable 類，才具備注冊和調用插件功能,而執行plugin方法其實就相當hook.tap(tapOpt, options.fn)進行存儲, 然后webpack在啟動運行期間,到達某個階段,就會觸發調用相應的事件。額外傳入一個 callback 回調函數,只有在插件中操作是異步的時候才需要,同步操作不需要傳入和執行這個callback。
還有一點需要注意的是compiler和compilation區別?

compiler 對象代表了完整的 webpack 環境配置。這個對象在啟動 webpack 時被一次性建立，并配置好所有可操作的設置，包括 options，loader 和 plugin。當在 webpack 環境中應用一個插件時，插件將收到此 compiler 對象的引用?？梢允褂盟鼇碓L問 webpack 的主環境。

compilation 對象代表了一次資源版本構建。當運行 webpack 開發環境中間件時，每當檢測到一個文件變化，就會創建一個新的 compilation，從而生成一組新的編譯資源。一個 compilation 對象表現了當前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態信息。compilation 對象也提供了很多關鍵時機的回調，以供插件做自定義處理時選擇使用。

安裝使用

const FileListPlugin = require("fileList");
module.exports = {
    entry: "./src/main.js",
    output:{
        path: path.join(__dirname,"dist"), 
        filename: "[name].js"
    },
    plugins: [
        new FileListPlugin({options: true})
    ]
}

輸出結果

demo完整鏈接

參考鏈接

https://doc.webpack-china.org...
https://doc.webpack-china.org...
https://webpack.js.org/contri...

云服務器 GPU云服務器源碼中文說明之 java安全機制源碼 plugins Plugin

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93812.html

webpack源碼之loader機制

摘要：用于對模塊的源代碼進行轉換。甚至允許你直接在模塊中文件和區別之前一篇文章中介紹了機制和今天研究的對象他們兩者在一起極大的拓展了的功能。原理說明上面是源碼中執行關鍵步驟遞歸的方式執行執行機流程似于中間件機制參考源碼參考文檔 loader概念 loader是用來加載處理各種形式的資源,本質上是一個函數, 接受文件作為參數,返回轉化后的結構。 loader 用于對模塊的源代碼進行轉換。loa...

dmlllll 2019-08-22 16:03 評論0 收藏0
淺談webpack之plugin，webpack-manifest-plugin源碼解讀

摘要：注冊方法之后，當執行了當前的，那么掛載正在當前上的方法就會被執行。比如在開始編譯之前，就能觸發鉤子，就用到了當前的。上面都是前置知識，下面通過解讀一個源碼來鞏固下。先看一段簡單的源碼。，是眾多的的一個，官網的解釋是編譯創建之后，執行插件。通過解讀webpack-manifest-plugin，了解下plugin機制先簡單說一下這個插件的功能，生成一份資源清單的json文件，如下 s...

william 2019-08-23 16:18 評論0 收藏0
webpack源碼之運行流程

摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個階段下面開始分析初始化這個階段整體流程做了什么啟動構建，讀取與合并配置參數，加載，實例化。推薦源碼之源碼之機制源碼之簡介源碼之機制參考源碼引言通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個階段,下面開始分析初始化這個階段整體流程做了什么? 啟動構建，讀...

kviccn 2019-08-22 16:04 評論0 收藏0
webpack源碼之tapable

摘要：它的行為和的方法相似，用來注冊一個處理函數監聽器，來在信號事件發生時做一些事情他最終還是調用進行存儲。而就全部取出來執行?？偨Y上面這些知識是理解插件和運行原理的前置條件更多內容待下次分解參考源碼版本說明參考鏈接引言去年3月的時候當時寫了一篇webpack2-update之路,到今天webpack已經到了4.2,更新挺快的,功能也在不斷的完善,webpack4特性之一就是零配置, w...

Keagan 2019-08-22 15:49 評論0 收藏0
webpack源碼分析之四：plugin

摘要：流程劃分縱觀整個打包過程，可以流程劃分為四塊。核心類關系圖功能實現模塊通過將源碼解析為樹并拆分，以及直至基礎模塊。通過的依賴和切割文件構建出含有和包含關系的對象。通過模版完成主入口文件的寫入，模版完成切割文件的寫入。前言插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個編譯過程。plugin在編譯的關鍵地方觸發對應的事件，極大的...

yhaolpz 2019-08-23 10:34 評論0 收藏0