模組

在 模組化程式設計 中，開發人員將程式分解成稱為模組的離散功能區塊。

每個模組的表面積都比完整程式小，讓驗證、除錯和測試變得簡單。編寫良好的模組提供穩固的抽象和封裝邊界，讓每個模組在整體應用程式中都有連貫的設計和明確的目的。

Node.js 幾乎從一開始就支援模組化程式設計。然而，在網路上，對模組的支援進展緩慢。有許多工具支援網路上的模組化 JavaScript，各有其優點和限制。Webpack 建立在從這些系統中學到的經驗，並將模組的概念套用到專案中的任何檔案。

什麼是 webpack 模組

與 Node.js 模組 相比，webpack 模組可以用各種方式表達其相依性。以下列舉幾個範例

• ES2015 import 陳述式
• CommonJS require() 陳述式
• AMD define 和 require 陳述式
• css/sass/less 檔案中的 @import 陳述式。
• 樣式表 url(...) 或 HTML <img src=...> 檔案中的圖片網址。

支援的模組類型

Webpack 原生支援下列模組類型

• ECMAScript 模組
• CommonJS 模組
• AMD 模組
• 資產
• WebAssembly 模組

除了 webpack 支援透過載入器以各種語言和預處理器編寫的模組。載入器向 webpack 描述如何處理非原生模組，並將這些相依性包含在您的套件中。webpack 社群已為各種流行的語言和語言處理器建置載入器，包括

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus
• Elm

以及許多其他語言！總體而言，webpack 提供強大且豐富的 API 可供自訂，讓您能將 webpack 用於任何堆疊，同時對您的開發、測試和生產工作流程保持中立。

如需完整清單，請參閱 載入器清單 或 撰寫您自己的載入器。