模块（Modules）

每个模块都具备了条理清晰的设计和明确的目的

何为 webpack 模块

与 Node.js 模块相比，webpack 模块能以各种方式表达它们的依赖关系。下面是一些示例：

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

支持的模块类型

Webpack 天生支持如下模块类型：

• ECMAScript 模块
• CommonJS 模块
• AMD 模块
• Assets
• WebAssembly 模块

模块解析（Module Resolution）

resolver 是一个帮助寻找模块绝对路径的库。 当打包模块时，webpack 使用 enhanced-resolve 来解析文件路径。

webpack 中的解析规则

绝对路径

import '/home/me/file';

import 'C:\\Users\\me\\file';

相对路径

import '../src/file1';
import './file2';

模块路径

import 'module';
import 'module/lib/file';

模块路径解析详看：https://webpack.docschina.org/configuration/resolve/

解析 loader

loader 的解析规则也遵循特定的规范。但是 resolveLoader 配置项可以为 loader 设置独立的解析规则。

缓存

每次文件系统访问文件都会被缓存，以便于更快触发对同一文件的多个并行或串行请求。在 watch 模式 下，只有修改过的文件会被从缓存中移出。如果关闭 watch 模式，则会在每次编译前清理缓存。