Webpack 模塊(Modules)

在模塊化編程中，開發(fā)者將程序分解為功能離散的 chunk，并稱之為模塊。

每個模塊都擁有小于完整程序的體積，使得驗證、調(diào)試及測試變得輕而易舉。 精心編寫的 模塊 提供了可靠的抽象和封裝界限，使得應(yīng)用程序中每個模塊都具備了條理清晰的設(shè)計和明確的目的。

Node.js 從一開始就支持模塊化編程。 然而，web 的 模塊化 正在緩慢支持中。 在 web 界存在多種支持 JavaScript 模塊化的工具，這些工具各有優(yōu)勢和限制。 Webpack 從這些系統(tǒng)中汲取了經(jīng)驗和教訓，并將 模塊 的概念應(yīng)用到項目的任何文件中。

何為 webpack 模塊

與 Node.js 模塊相比，webpack 模塊 能以各種方式表達它們的依賴關(guān)系。下面是一些示例：

• ES2015 ?import? 語句
• CommonJS ?require()? 語句
• AMD ?define? 和 ?require? 語句
• css/sass/less 文件中的 ?@import? 語句。
• stylesheet ?url(...)? 或者 HTML ?<img src=...>? 文件中的圖片鏈接。

支持的模塊類型

Webpack 天生支持如下模塊類型：

• ECMAScript 模塊
• CommonJS 模塊
• AMD 模塊
• Assets
• WebAssembly 模塊

通過 loader 可以使 webpack 支持多種語言和預(yù)處理器語法編寫的模塊。loader 向 webpack 描述了如何處理非原生模塊，并將相關(guān)依賴引入到你的 bundles中。 webpack 社區(qū)已經(jīng)為各種流行的語言和預(yù)處理器創(chuàng)建了 loader，其中包括：

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

當然還有更多！總得來說，webpack 提供了可定制，強大且豐富的 API，允許在 任何技術(shù)棧 中使用，同時支持在開發(fā)、測試和生產(chǎn)環(huán)境的工作流中做到 無侵入性。

關(guān)于 loader 的相關(guān)信息，請參考 loader 列表 或 自定義 loader。

Further Reading

• JavaScript Module Systems Showdown