Nuxt.js 應用中的 webpack：done 事件鉤子

Amd794發表於2024-11-26
UXJSWeb事件

title: Nuxt.js 應用中的 webpack：done 事件鉤子
date: 2024/11/26
updated: 2024/11/26
author: cmdragon

excerpt:
webpack:done 鉤子用於處理 Webpack 編譯完成後的邏輯。在 Webpack 編譯的所有任務完成後，這個鉤子會被呼叫，通常用於通知開發者編譯的狀態、執行清理工作或作為開發工具的提示。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • Webpack
  • 鉤子
  • 編譯
  • 清理
  • UI
  • 載入

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

webpack:done 鉤子用於處理 Webpack 編譯完成後的邏輯。在 Webpack 編譯的所有任務完成後，這個鉤子會被呼叫，通常用於通知開發者編譯的狀態、執行清理工作或作為開發工具的提示。

文章目錄

  • 1. 引言
  • 2. webpack:done 鉤子概述
  • 3. 程式碼示例
    • 3.1. 輸出編譯成功資訊
    • 3.2. 執行清理操作
    • 3.3. 在 UI 中顯示 loading 狀態結束
  • 4. 注意事項
  • 5. 總結

1. 引言

隨著現代前端開發的複雜性不斷增加，Webpack 成為構建和打包工具的首選。編譯的完成及狀態監控在提升開發者體驗上至關重要。webpack:done 鉤子提供了一種優雅的方式來處理編譯完成後的邏輯。

2. webpack:done 鉤子概述

一般介紹

webpack:done 鉤子在 Webpack 的所有構建任務完成後觸發。它使得開發者能夠干預這個時刻，進行成功通知、清理操作或其他需要在構建後執行的邏輯。

作用

使用 webpack:done 鉤子，可以：

  • 輸出編譯成功的資訊到控制檯。
  • 執行任何需要在構建完成時進行的清理操作。
  • 停止 loading 指示器或提示使用者構建狀態已完成。

3. 程式碼示例

3.1. 輸出編譯成功資訊

目的: 在控制檯中輸出編譯成功的資訊。

// plugins/webpackDone.js
import { defineNuxtPlugin } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks('webpack:done', () => {
    console.log('\nWebpack 編譯完成！💻');
  });
});

3.2. 執行清理操作

目的: 在每次構建完成後，清理臨時檔案或快取。

// plugins/webpackDone.js
import { defineNuxtPlugin } from '#app';
import fs from 'fs';
import path from 'path';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks('webpack:done', () => {
    const tempDir = path.resolve(__dirname, 'temp');

    // 清理臨時資料夾
    fs.rm(tempDir, { recursive: true, force: true }, (err) => {
      if (err) {
        console.error('清理臨時檔案失敗:', err);
      } else {
        console.log('臨時檔案已清理！');
      }
    });
  });
});

3.3. 在 UI 中顯示 loading 狀態結束

目的: 透過 UI 元件庫停止 loading 狀態顯示。

// plugins/webpackDone.js
import { defineNuxtPlugin } from '#app';
import { ElLoading } from 'element-plus'; // 假設使用 Element Plus

const loadingInstance = ElLoading.service({ text: '正在編譯...', fullscreen: true });

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks('webpack:done', () => {
    loadingInstance.close(); // 關閉 loading
    console.log('編譯完成，所有操作已結束！');
  });
});

4. 注意事項

  • 效能考慮: 在 webpack:done 中執行的操作應儘量快速，以避免影響後續的構建流程。
  • 非同步操作: 如果有非同步操作，確保它們不會阻塞主執行緒，建議使用 async/await 或 Promise 進行控制。
  • 使用者體驗: 所有與使用者互動的提示應友好且明確，確保開發者能夠快速理解當前狀態。

5. 總結

透過使用 webpack:done 鉤子，開發者可以在每次構建完成後進行必要的後續操作或狀態更新。無論是輸出成功資訊、進行清理還是關閉 loading 狀態，該鉤子都提供了便捷的解決方案

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt.js 應用中的 webpack：done 事件鉤子 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 應用中的 webpack：error 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 webpack：change 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 webpack：compiled 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 webpack：compile 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 webpack：configResolved事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：compiled 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：serverCreated 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：configResolved 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extendConfig 事件鉤子 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：written 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：beforeWrite 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：resolved 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extendConfig 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 vite：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 schema：extend事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 listen 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 prepare：types 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 build：error 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 prerender：routes 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：build：public-assets 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：build：before 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：init 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 nitro：config 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 components：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 components：dirs 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：dirs 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：context 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：extend 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 imports：sources 事件鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 server：devHandler 事件鉤子詳解 | cmdragon's Blog

相關文章