webpack的路径解析

问题：在应用webpack的工程中，可以使用 import语法引入模块。那么webpack是怎么找到对应的模块？

一、import 语法有三种写法

//相对路径：以..或.开头
import "../src/file1";
import "./file2";

//模块路径：以模块名开头
import "module";
import "module/lib/file";

//绝对路径 ： 以/或盘符开头
import "/home/me/file";
import "C:\\Users\\me\\file";

(1)相对路径下具体怎么解析
1.查找该路径下是否有对应文件或文件夹
2.是文件则直接加载
3.是文件夹则继续查找文件夹下的package.json文件
4.有package.json文件则按照文件中的main字段的文件名来查找文件
5.无package.json或者无main字段则查找index.js文件
(2)模块路径
查找当前文件目录下，父级目录及以上目录下的node_modules文件夹，看是否有对应名称的模块.
模块将在 resolve.modules中指定的所有目录内搜索。
(3)绝对路径
不建议使用，会直接查找对应路径的文件

二、关于解析路径规则的自定义配置
在 webpack 配置中，和模块路径解析相关的配置都在 resolve 字段下：

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

(1)resolve.alias
非常常用的模块，不想总是写相对路径，希望可以直接import模块

alias: {
  utils$: path.resolve(__dirname, 'src/utils') // 这里使用 path.resolve 和 __dirname 来获取绝对路径
}
只有在遇到 import 'utils' 时，才会被替换成定义的路径

(2)resolve.extensions
可以让你少写一些后缀名。

extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
// 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js

(3)resolve.modules
默认就是modules: ['node_modules'],
通常情况下，我们不会调整这个配置，但是如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules 中的话，那么可以在 node_modules 之前配置一个确定的绝对路径，在某种程度上可以简化模块的查找，提升构建速度。

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
    'node_modules', // 如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
  ],
}

(4)resolve.mainFields
决定解析相对路径的步骤4中到底用哪个字段

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser', 'module', 'main'],
  // target 的值为其他时，mainFields 默认值为：
  mainFields: ["module", "main"],
},

(5)resolve.mainFiles
当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的，是的，使用 resolve.mainFiles 字段。
mainFiles: ['index'], // 你可以添加其他默认使用的文件名
(6)resolve.resolveLoader
用于配置解析 loader 时的 resolve 配置，原本 resolve 的配置项在这个字段下基本都有,我们使用默认配置就好啦。

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