webpack工做原理及loader和plugin的區別

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

---

目錄

webpack 原理

webpack 配置

webpack核心概念

entry

Output

Module

Chunk

loader

plugin

loader和plugin的區別

webpack 構建流程

---

webpack 原理

本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。經過代碼分割成單元片斷並按需加載。

webpack 不只可讓咱們編寫模塊，並且還支持任何模塊格式（至少在咱們到達 ESM 以前），而且能夠同時處理資源和資產，這也是 webpack 存在的緣由。

webpack 配置

如下是webpack.config.js的基本配置，更多配置請移步webpack配置

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};
複製代碼

webpack核心概念

entry

入口起點(entry point)指示 webpack 應該使用哪一個模塊,來做爲構建其內部依賴圖的開始。

進入入口起點後,webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

每一個依賴項隨即被處理,最後輸出到稱之爲 bundles 的文件中。

Output

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles,以及如何命名這些文件,默認值爲 ./dist。

基本上,整個應用程序結構,都會被編譯到你指定的輸出路徑的文件夾中。

Module

模塊,在 Webpack 裏一切皆模塊,一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出全部依賴的模塊。

Chunk

代碼塊,一個 Chunk 由多個模塊組合而成,用於代碼合併與分割。

loader

loader是文件轉換器，能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊。

本質上，webpack 只能理解 JavaScript 和 JSON 文件，這是 webpack 開箱可用的自帶能力。loader 讓 webpack 可以去處理其餘類型的文件，並將它們轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。

webpack 就像一條生產線,要通過一系列處理流程後才能將源文件轉換成輸出結果。 這條生產線上的每一個處理流程的職責都是單一的,多個流程之間有存在依賴關係,只有完成當前處理後才能交給下一個流程去處理。 插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源作處理。

1. 處理一個文件能夠使用多個loader，loader的執行順序和配置中的順序是相反的，即最後一個loader最早執行，第一個loader最後執行

2. 第一個執行的loader接收源文件內容做爲參數，其它loader接收前一個執行的loader的返回值做爲參數，最後執行的loader會返回此模塊的JavaScript源碼

plugin

loader 用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量。

在webpack運行的生命週期中會廣播出許多事件，plugin能夠監聽這些事件，在合適的時機經過webpack提供的API改變輸出結果。

webpack 經過 Tapable 來組織這條複雜的生產線。 webpack 在運行過程當中會廣播事件,插件只須要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運做。 webpack 的事件流機制保證了插件的有序性,使得整個系統擴展性很好。

loader和plugin的區別

對於loader，它是一個轉換器，單純的文件轉換過程

plugin是一個擴展器，它豐富了webpack自己，針對是loader結束後，webpack打包的整個過程，它並不直接操做文件，而是基於事件機制工做，會監聽webpack打包過程當中的某些節點，執行普遍的任務

webpack 構建流程

Webpack 的運行流程是一個串行的過程,從啓動到結束會依次執行如下流程 :

• 初始化參數：從配置文件和 Shell 語句中讀取與合併參數,得出最終的參數。
• 開始編譯：用上一步獲得的參數初始化 Compiler 對象,加載全部配置的插件,執行對象的 run 方法開始執行編譯。
• 肯定入口：根據配置中的 entry 找出全部的入口文件。
• 編譯模塊：從入口文件出發,調用全部配置的 Loader 對模塊進行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理。
• 完成模塊編譯：在通過第 4 步使用 Loader 翻譯完全部模塊後,獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係。
• 輸出資源：根據入口和模塊之間的依賴關係,組裝成一個個包含多個模塊的 Chunk,再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表,這步是能夠修改輸出內容的最後機會。
• 輸出完成：在肯定好輸出內容後,根據配置肯定輸出的路徑和文件名,把文件內容寫入到文件系統。

在以上過程當中,Webpack 會在特定的時間點廣播出特定的事件,插件在監聽到感興趣的事件後會執行特定的邏輯,而且插件能夠調用 Webpack 提供的 API 改變 Webpack 的運行結果。

---

若是這篇文章幫到了你，記得點贊👍收藏加關注哦😊，但願點贊多多多多...

文中若有錯誤，歡迎在評論區指正