# 模塊(Modules) 在[模塊化編程](https://en.wikipedia.org/wiki/Modular_programming)中，開發者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為*模塊*。 每個模塊具有比完整程序更小的接觸面，使得校驗、調試、測試輕而易舉。 精心編寫的*模塊*提供了可靠的抽象和封裝界限，使得應用程序中每個模塊都具有條理清楚的設計和明確的目的。 Node.js 從最一開始就支持模塊化編程。然而，在 web，*模塊化*的支持正緩慢到來。在 web 存在多種支持 JavaScript 模塊化的工具，這些工具各有優勢和限制。webpack 基于從這些系統獲得的經驗教訓，并將*模塊*的概念應用于項目中的任何文件。 ## 什么是 webpack 模塊 對比 [Node.js 模塊](https://nodejs.org/api/modules.html)，webpack *模塊*能夠以各種方式表達它們的依賴關系，幾個例子如下： - [ES2015 `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 語句 - [CommonJS](http://www.commonjs.org/specs/modules/1.0/) `require()` 語句 - [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) `define` 和 `require` 語句 - css/sass/less 文件中的 [`@import` 語句](https://developer.mozilla.org/en-US/docs/Web/CSS/@import)。 - 樣式(`url(...)`)或 HTML 文件(`<img src=...>`)中的圖片鏈接(image url) > webpack 1 需要特定的 loader 來轉換 ES 2015 `import`，然而通過 webpack 2 可以開箱即用。 ## 支持的模塊類型 webpack 通過 *loader* 可以支持各種語言和預處理器編寫模塊。*loader* 描述了 webpack **如何**處理 非 JavaScript(non-JavaScript) *模塊*，并且在*bundle*中引入這些*依賴*。 webpack 社區已經為各種流行語言和語言處理器構建了 *loader*，包括： - [CoffeeScript](http://coffeescript.org/) - [TypeScript](https://www.typescriptlang.org/) - [ESNext (Babel)](https://babeljs.io/) - [Sass](http://sass-lang.com/) - [Less](http://lesscss.org/) - [Stylus](http://stylus-lang.com/) 總的來說，webpack 提供了可定制的、強大和豐富的 API，允許**任何技術棧**使用 webpack，保持了在你的開發、測試和生成流程中**無侵入性(non-opinionated)**。