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: ./templateRegular expression: /^.*.ejs$/