問題：在應(yīng)用webpack的工程中，可以使用 import語法引入模塊。那么webpack是怎么找到對應(yīng)的模塊？

一、import 語法有三種寫法

//相對路徑：以..或.開頭
import "../src/file1";
import "./file2";

//模塊路徑：以模塊名開頭
import "module";
import "module/lib/file";

//絕對路徑 ： 以/或盤符開頭
import "/home/me/file";
import "C:\\Users\\me\\file";

(1)相對路徑下具體怎么解析
1.查找該路徑下是否有對應(yīng)文件或文件夾
2.是文件則直接加載
3.是文件夾則繼續(xù)查找文件夾下的package.json文件
4.有package.json文件則按照文件中的main字段的文件名來查找文件
5.無package.json或者無main字段則查找index.js文件
(2)模塊路徑
查找當(dāng)前文件目錄下，父級目錄及以上目錄下的node_modules文件夾，看是否有對應(yīng)名稱的模塊.
模塊將在 resolve.modules中指定的所有目錄內(nèi)搜索。
(3)絕對路徑
不建議使用，會直接查找對應(yīng)路徑的文件

二、關(guān)于解析路徑規(guī)則的自定義配置
在 webpack 配置中，和模塊路徑解析相關(guān)的配置都在 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'],
// 這里的順序代表匹配后綴的優(yōu)先級，例如對于 index.js 和 index.jsx，會優(yōu)先選擇 index.js

(3)resolve.modules
默認(rèn)就是modules: ['node_modules'],
通常情況下，我們不會調(diào)整這個配置，但是如果可以確定項(xiàng)目內(nèi)所有的第三方依賴模塊都是在項(xiàng)目根目錄下的 node_modules 中的話，那么可以在 node_modules 之前配置一個確定的絕對路徑，在某種程度上可以簡化模塊的查找，提升構(gòu)建速度。

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules'), // 指定當(dāng)前目錄下的 node_modules 優(yōu)先查找
    'node_modules', // 如果有一些類庫是放在一些奇怪的地方的，你可以添加自定義的路徑或者目錄
  ],
}

(4)resolve.mainFields
決定解析相對路徑的步驟4中到底用哪個字段

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 時 mainFields 默認(rèn)值是：
  mainFields: ['browser', 'module', 'main'],
  // target 的值為其他時，mainFields 默認(rèn)值為：
  mainFields: ["module", "main"],
},

(5)resolve.mainFiles
當(dāng)目錄下沒有 package.json 文件時，我們說會默認(rèn)使用目錄下的 index.js 這個文件，其實(shí)這個也是可以配置的，是的，使用 resolve.mainFiles 字段。
mainFiles: ['index'], // 你可以添加其他默認(rèn)使用的文件名
(6)resolve.resolveLoader
用于配置解析 loader 時的 resolve 配置，原本 resolve 的配置項(xiàng)在這個字段下基本都有,我們使用默認(rèn)配置就好啦。

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