【前端必會】走進webpack生命周期,另類的學習方法

来源:https://www.cnblogs.com/lee35/archive/2022/09/30/16746510.html
-Advertisement-
Play Games

#背景 webpack構建過程中的hooks都有什麼呢?除了在網上看一些文章,還可以通過更直接的辦法,結合官方文檔快速讓你進入webpack的hook世界 寫一個入口文件 //index.js const webpack = require("webpack"); const path = requ ...


背景

webpack構建過程中的hooks都有什麼呢?除了在網上看一些文章,還可以通過更直接的辦法,結合官方文檔快速讓你進入webpack的hook世界

寫一個入口文件

//index.js
const webpack = require("webpack");
const path = require("path");
const PrintHooksPlugin = require("./PrintHooksPlugin");
const config = {
  context: path.resolve(__dirname),
  mode: "production",
  optimization: {
    minimize: false,
  },
  entry: "./main.js",
  target: ["web", "es5"],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [new PrintHooksPlugin()],
};

const compiler = webpack(config);
compiler.run((err, stats) => {
  debugger;
});

//看下列印插件

//PrintHooksPlugin.js
class PrintHooksPlugin {
  constructor() {}
  //列印編譯器Hooks
  printCompilerHooks(compiler) {
    //列印編譯對象
    compiler.hooks.thisCompilation.tap("PrintHooksPlugin", (compilation) => {
      this.printCompilationHooks(compilation);
    });

    //遍歷compiler hooks
    Object.keys(compiler.hooks).forEach((hookName) => {
      compiler.hooks[hookName].tap("PrintHooksPlugin", (arg) => {
        console.log(`${hookName}`, hookName, arg);
      });
    });
  }

  //列印編譯(構建)Hooks
  printCompilationHooks(compilation) {
    let compilationHooks = compilation.hooks;

    //這裡添加一個正則對象,判斷Hook結尾的
    let reg = /Hook$/;
    Object.keys(compilationHooks).forEach((hookName) => {
      //獲取hook函數名,判斷以Hook結尾,並且不是log
      let name = compilationHooks[hookName].constructor.name;
      if (reg.test(name) && hookName !== "log") {
        compilationHooks[hookName].tap("PrintHooksPlugin", (arg) => {
          console.log(`compilation ${hookName}`, arg);
        });
      }
    });
  }

  //插件入口
  apply(compiler) {
    console.log(compiler);
    console.log(compiler.hooks.thisCompilation);
    this.printCompilerHooks(compiler);
  }
}
module.exports = PrintHooksPlugin;

//main.js
!(function () {
  console.log('hello world');
})();

結果

列印順序就說明瞭生命周期的過程

截圖不全,看一下後面的

總結

  1. 換一種方法學習webpack的生命周期,那個hook在文檔上看不太明白,直接斷點,看看處理前後數據結構的變化。結合插件的源碼。不信你不會
  2. 我們主要掌握方法,除了書本的知識,還要結合實踐

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • @(文章目錄) 前言 今天和大家一起來看一下在LabVIEW中如何使用OpenCV DNN模塊實現手寫數字識別 一、OpenCV DNN模塊 1.OpenCV DNN簡介 OpenCV中的DNN(Deep Neural Network module)模塊是專門用來實現深度神經網路相關功能的模塊。Op ...
  • 一、原理總結 利用兩個寄存器R4和R5來存儲兩個數位管的顯示效果,R4是前一個數位管顯示所需,而R5是後一個數位管顯示所需,利用左移操作RLC來使之每一位被依次輸入到C中,然後將C輸入到LED中(當LED每位都有數據時,數位管才會顯示),利用停頓函數使數位管上數字停留一段時間。 二、程式分析 以下為 ...
  • Java資料庫的安裝和使用 1.資料庫的作用 一個問題:淘寶網、京東、微信抖音,都有各自的功能,那麼我們退出系統的時候,為什麼信息還在? 解決之道-文件,資料庫 為瞭解決上訴問題,使用更加利於管理數據東西-資料庫,他能更加有效地管理數據。 舉一個生活化的案例說明:如果說圖書館是保存書籍的,那麼資料庫 ...
  • LIKE操作符:通配符搜索只能用於文本欄位(字元串) 1、%通配符 1 select 2 col_name 3 from 4 table_name 5 where 6 col_name 7 like "%str" 2、_通配符 1 select 2 col_name 3 from 4 table_n ...
  • 一直使用Postgresql資料庫,有一張表是這樣的: DROP TABLE IF EXISTS "public"."devicedata"; CREATE TABLE "public"."devicedata" ( "Id" varchar(200) COLLATE "pg_catalog"."d ...
  • 據中國信通院發佈,2012年到2021年10年間,我國數字經濟規模由12萬億元增長到45.5萬億元,在整個GDP中的比重由21.6%提升至39.8%。順應時代發展新趨勢,“數據”成為新的生產要素已是毋庸置疑的共識。 如果說數據中台的崛起代表著企業數字化轉型從流程驅動走向數據驅動,從數字化走向智能化。 ...
  • 首發微信公眾號:SQL資料庫運維 原文鏈接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • 現如今,手機錄屏是必不可少的能力之一。對於游戲領域作者來說,在平時直播玩游戲、製作攻略、操作集錦時,不方便切屏,這時在游戲內如果有一個錄製按鈕就可以隨時開啟,記錄下每個精彩瞬間,減少後期剪輯工作量;在直播App中開啟一鍵錄屏,不光方便主播後續的賬號運營與復盤,用戶也能隨時截取有意思的片段傳播在社交媒 ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...