模块

---

title: 模块
sort: 6
contributors:

• TheLarkInn
• simon04
• rouzbeh84
• EugeneHlushko
• byzyk
  related:
• title: JavaScript Module Systems Showdown
  url: https://auth0.com/blog/javascript-module-systems-showdown/

---

在模块化编程中，开发者将程序拆分为离散的功能块，称为模块（module）。

每个模块的表面积都小于整个程序，这使得验证、调试和测试变得简单。
编写良好的_模块_提供坚实的抽象和封装边界，使每个模块在整个应用中具有一致的设计和明确的目的。

Node.js 几乎从一开始就支持模块化编程。
然而在 Web 端，对_模块_的支持却迟迟没有到来。
目前有多种工具支持在 Web 上使用模块化 JavaScript，各有优缺点。
webpack 吸取了这些系统的经验，并将_模块_的概念应用到项目中的任何文件上。

什么是 webpack Module

与 Node.js 模块不同，webpack_模块_可以通过多种方式表达其_依赖_。举几个例子：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• 在 css/sass/less 文件中的 @import 语句
• 样式表中的图片 URL url(...) 或 HTML <img src=...> 文件

支持的模块类型

webpack 原生支持以下模块类型：

• ECMAScript modules
• CommonJS modules
• AMD modules
• Assets
• WebAssembly modules

此外，webpack 还通过_加载器_（loaders）支持以多种语言和预处理器编写的模块。加载器_告诉 webpack 如何处理非原生_模块，并将这些_依赖_包含到你的_打包产物_中。
webpack 社区已经为各种流行的语言和语言处理器构建了_加载器_，包括：

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

以及许多其他！总之，webpack 提供了强大而丰富的自定义 API，使人们可以在任何技术栈中使用 webpack，同时对你的开发、测试和生产工作流保持非侵入式。

完整列表请参阅 loaders 列表 或 编写你自己的 loader。