【前端必會】走進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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...