webpack如何查找模块依赖

【01】Webpack的文件加载分为三种：

绝对路径

比如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$/