绝对路径

比如require('/home/me/file')。此时会首先检查参数目标是否为目录，如果是目录，则检查package.json的main字段。

如果没有package.json或者没有main字段，则会用index作为文件名。

经过上述过程，解析到一个绝对路径的文件名，然后会尝试为其加上扩展名（扩展名可在webpack.config.js中设置），第一个存在的文件作为最终的结果。

相对路径

比如require('./file')。使用当前路径或配置文件中的context作为相对路径的目录。加载过程和绝对路径相似。

模块路径

如require('module/lib/file')。会在配置文件中的所有查找目录中查找。

对于复杂的模块路径，还可以设置别名(resolve.alias)。

一个路径解析配置的例子： resolve.extensions

用于指明程序自动补全识别哪些后缀。第一个是空字符串，对应不需要后缀的情况。

module.exports = {
    resolve: {
        root: [appRoot, nodeRoot, bowerRoot],
        modulesDirectories: [appModuleRoot], 
        alias: {
            'angular': 'angular/angular',
            'lodash': 'lodash/dist/lodash'
        },
        extensions: ['', '.js', '.coffee', '.html', '.css', '.scss']
    }
}

Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式来配置，以兼容 Windows 环境。

带表达式的 require 语句

如果request 含有表达式(expressions)，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入。

示例：

require("./template/" + name + ".ejs");

webpack 解析 require() 的调用，提取出来如下这些信息：

Directory: ./template
Regular expression: /^.*\.ejs$/

Webpack在本地按目录对依赖进行查找的。

可以构造一个例子, 用 --display-error-details 查看查找过程。

// webpack.config.js
module.exports = {
  entry: './a.js',
  output: {
    filename: 'b.js'
  },
  resolve: {
    extensions: ['', '.coffee', '.js']
  }
}
// a.js
require('./c')

结果：

➤➤ webpack --display-error-details
Hash: e38f7089c39a1cf34032
Version: webpack 1.5.3
Time: 54ms
Asset  Size  Chunks             Chunk Names
 b.js  1646       0  [emitted]  main
   [0] ./a.js 15 {0} [built] [1 error]

ERROR in ./a.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./c in /Users/chen/Drafts/webpack/details
resolve file
  /Users/chen/Drafts/webpack/details/c doesn't exist
  /Users/chen/Drafts/webpack/details/c.coffee doesn't exist
  /Users/chen/Drafts/webpack/details/c.js doesn't exist
resolve directory
  /Users/chen/Drafts/webpack/details/c doesn't exist (directory default file)
  /Users/chen/Drafts/webpack/details/c/package.json doesn't exist (directory description file)
[/Users/chen/Drafts/webpack/details/c]
[/Users/chen/Drafts/webpack/details/c.coffee]
[/Users/chen/Drafts/webpack/details/c.js]
 @ ./a.js 2:0-14

webpack如何查找模块依赖(版本4.41.2)

绝对路径

相对路径

模块路径

带表达式的 require 语句