03解析代码模块路径

webpack构建时，会解析依赖，然后再去加载依赖的模块文件。

webpack中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的，该模块是Node.js那一套路径解析的增强版，有很多自定义解析配置。

可参考 深入 Node.js 的模块机制

模块解析规则

解析相对路径

1. 查找相对当前模块的路径下是否有对应文件或文件夹
2. 是文件则直接加载
3. 是文件夹则继续查找文件下的package.json文件
4. 无package.json或者无main字段则查找index.js文件

解析模块名

查找当前目录下，父级目录及以上目录的node_modules文件夹，看是否有对应名称的模块

解析绝对路径 (不建议使用)

直接查找对应路径文件

在webpack配置中，和模块路径相关的配置都在resolve字段下

module.exports = {
  resolve: {
    // ...
  }
}

常用的配置

resolve.alias 配置模块别名

resolve.extensions 补全后缀名

resolve.modules 通常不会调用这个配置，但如果项目所有第三方依赖模块都是在根目录下的node_modules，那么可以在 node_modules 之前配置一个确定的绝对路径

resolve: {
  modules: {
    path.resolve(__dirname, 'node_modules'),
    'node_modules'
  }
}

这样配置可简化模块查找，提升构建速度

resolve.mainFields 用得较少，无须修改配置，就是约定俗成

有package.json文件按照文件中main字段的文件名来查找文件

resolve.resolveLoader

用于解析loader时的resolve配置，默认配置就好，这里了解不用改：

resolve: {
  resolveLoader: {
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main']
  }
}