深入理解 Webpack：Module、Chunk 和 Bundle 是什麼？

導言 - Lead paragraph

在現代網頁開發中，Webpack 已經成為一個關鍵的工具，它能夠將數量龐大的模組打包成最佳的輸出結果。

然而要完全理解 Webpack 的運作原理，我們需要明確區分三個重要的概念：

Module
Chunk
Bundle

本文將深入探討這些概念，統整出筆記以便更好地理解它們之間的關係。

官方文檔解釋 - Official Documentation

在開始之前先來看一下官方文檔的名詞解釋：

Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

Module（模組）：
指提供比完整程式更小範圍功能的離散功能塊。
良好撰寫的模組提供堅實的抽象和封裝邊界，構成一個連貫的設計和明確的目的。

Chunk（塊）：
這是 Webpack 特定的術語，用於內部管理打包過程。Bundle 由多個 Chunk 組成，其中有幾種類型（例如 Entry（入口點）和 child (可能是子 Chunk 的意思? 不確定) ）。
通常，Chunk 直接對應著輸出的 Bundle，但有些配置不會產生一對一的關係。

Bundle（捆綁包/打包結果）：
由多個獨立 Module 產生，Bundle 包含已經經過加載和編譯過程的源程式碼的最終版本。

模組 - Module

在 Webpack 中，Module 代表著應用程序中的單個模塊，一個 Module 可以是一個 JavaScript 文件、CSS文件、圖片文件或其他任何類型的資源。

每個 Module 都有自己的功能並獨立於其他模塊，它們可以進行封裝、導出和導入。

下面的基礎例子展示了兩個 JavaScript Module 如何相互導入：

// moduleA.js
export function foo() {
  return 'Hello';
}

// moduleB.js
import { foo } from './moduleA';

console.log(foo() + ' World!');

上方 moduleA.js 和 moduleB.js 為兩個獨立的 Module，它們通過 export 和 import 語句進行了相互的導入和導出。

塊 - Chunk

Chunk 是 Webpack 在模組之間建立的關聯，它是一個包含多個 Module 的集合。

Webpack 根據一定的規則將相關聯的 Module 打包到同一個 Chunk 中。

一個 Chunk 可以被認為是一個邏輯上的程式碼塊，它可能包含多個 Module，以及 Module 間的相互依賴關係。

下面的基礎例子展示了 Webpack 如何根據 Module 的相互依賴關係生成 Chunk：

// index.js
import { foo } from './moduleA';
import { bar } from './moduleB';

console.log(foo() + bar());

上方 index.js 引入了 moduleA.js 和 moduleB.js 兩個模組，並且它們之間存在依賴關係。

Webpack 會將這兩個 Module 打包到同一個 Chunk 中，確保它們能夠正確地運行。

若還是無法理解的話看看純文字說明吧！

現在假設我們的應用程式有兩個入口點

app.js
admin.js

分別代表應用程式的前端和後台管理功能，Webpack 會根據入口點的相依模組，將相關的 Module 分組為兩個 Chunks。

這樣會不會比較明瞭呢，而不是透過程式碼去理解思考？

打包結果 - Bundle

Bundle 代表著 Webpack 最終生成的輸出文件。

它是由一個或多個 Chunk 組成，其中包含了整個應用程序的邏輯。

下面的基礎例子是 Webpack 打包生成的 Bundle：

// bundle.js
(function(modules) {
  // Module 的執行邏輯
})({
  './moduleA.js': function(module, exports) {
    // moduleA.js的內容
  },
  './moduleB.js': function(module, exports) {
    // moduleB.js的內容
  },
  './index.js': function(module, exports, require) {
    // index.js的內容
  },
  // 更多 Module...
});