当使用 import 导入模块时,Webpack 会根据配置对 Node.js 模块解析进行处理。
Webpack 默认情况下会按照以下规则解析模块:
1: 核心模块:如果你导入的模块是 Node.js 的核心模块(如 fs、path 等),Webpack 会直接将其视为核心模块,不会进行解析和处理。
2: 相对路径/绝对路径:如果你导入的模块使用相对路径或绝对路径(如 ./foo、…/bar 或 /path/to/module),Webpack 会根据路径进行解析并将其打包到输出的 bundle 文件中。
3: 模块路径:如果你导入的模块是通过模块路径(如 lodash、react 等)导入的,Webpack 会根据配置中的解析规则来解析这些模块。其中,Webpack 默认会从当前模块所在目录开始向上逐级查找 node_modules 目录,并寻找符合模块路径的模块。
-
如果找到匹配的模块,Webpack 会将其打包到输出的 bundle 文件中。
-
如果找不到匹配的模块,Webpack 将抛出一个解析错误。
Webpack 通常只处理 JavaScript 模块,对于其他类型的模块(如 CSS、图片等),可能需要使用相应的 loader 来处理和导入。
如果使用了 Webpack 的别名(alias)功能或其他自定义的解析规则,Webpack 会根据这些配置来解析模块路径。