模块(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 模式,则会在每次编译前清理缓存。