問(wèn)題：在應(yīng)用webpack的工程中癞揉，可以使用 import語(yǔ)法引入模塊丧凤。那么webpack是怎么找到對(duì)應(yīng)的模塊煤蹭？
一光坝、import 語(yǔ)法有三種寫(xiě)法
//相對(duì)路徑：以..或.開(kāi)頭
import "../src/file1";
import "./file2";
//模塊路徑：以模塊名開(kāi)頭
import "module";
import "module/lib/file";
//絕對(duì)路徑 ： 以/或盤(pán)符開(kāi)頭
import "/home/me/file";
import "C:\\Users\\me\\file";
(1)相對(duì)路徑下具體怎么解析
1.查找該路徑下是否有對(duì)應(yīng)文件或文件夾
2.是文件則直接加載
3.是文件夾則繼續(xù)查找文件夾下的package.json文件
4.有package.json文件則按照文件中的main字段的文件名來(lái)查找文件
5.無(wú)package.json或者無(wú)main字段則查找index.js文件
(2)模塊路徑
查找當(dāng)前文件目錄下朗涩，父級(jí)目錄及以上目錄下的node_modules文件夾洲鸠，看是否有對(duì)應(yīng)名稱(chēng)的模塊.
模塊將在 resolve.modules中指定的所有目錄內(nèi)搜索。
(3)絕對(duì)路徑
不建議使用馋缅，會(huì)直接查找對(duì)應(yīng)路徑的文件
二扒腕、關(guān)于解析路徑規(guī)則的自定義配置
在 webpack 配置中，和模塊路徑解析相關(guān)的配置都在 resolve 字段下：
module.exports = {
resolve: {
// ...
}
}
(1)resolve.alias
非常常用的模塊萤悴，不想總是寫(xiě)相對(duì)路徑瘾腰，希望可以直接import模塊
alias: {
utils$: path.resolve(__dirname, 'src/utils') // 這里使用 path.resolve 和 __dirname 來(lái)獲取絕對(duì)路徑
}
只有在遇到 import 'utils' 時(shí)，才會(huì)被替換成定義的路徑
(2)resolve.extensions
可以讓你少寫(xiě)一些后綴名覆履。
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
// 這里的順序代表匹配后綴的優(yōu)先級(jí)蹋盆，例如對(duì)于 index.js 和 index.jsx费薄，會(huì)優(yōu)先選擇 index.js
(3)resolve.modules
默認(rèn)就是modules: ['node_modules'],
通常情況下，我們不會(huì)調(diào)整這個(gè)配置栖雾，但是如果可以確定項(xiàng)目?jī)?nèi)所有的第三方依賴(lài)模塊都是在項(xiàng)目根目錄下的 node_modules 中的話楞抡，那么可以在 node_modules 之前配置一個(gè)確定的絕對(duì)路徑，在某種程度上可以簡(jiǎn)化模塊的查找析藕，提升構(gòu)建速度召廷。
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'), // 指定當(dāng)前目錄下的 node_modules 優(yōu)先查找
'node_modules', // 如果有一些類(lèi)庫(kù)是放在一些奇怪的地方的，你可以添加自定義的路徑或者目錄
],
}
(4)resolve.mainFields
決定解析相對(duì)路徑的步驟4中到底用哪個(gè)字段
resolve: {
// 配置 target === "web" 或者 target === "webworker" 時(shí) mainFields 默認(rèn)值是：
mainFields: ['browser', 'module', 'main'],
// target 的值為其他時(shí)账胧，mainFields 默認(rèn)值為：
mainFields: ["module", "main"],
},
(5)resolve.mainFiles
當(dāng)目錄下沒(méi)有 package.json 文件時(shí)竞慢，我們說(shuō)會(huì)默認(rèn)使用目錄下的 index.js 這個(gè)文件，其實(shí)這個(gè)也是可以配置的治泥，是的筹煮，使用 resolve.mainFiles 字段。
mainFiles: ['index'], // 你可以添加其他默認(rèn)使用的文件名
(6)resolve.resolveLoader
用于配置解析 loader 時(shí)的 resolve 配置居夹，原本 resolve 的配置項(xiàng)在這個(gè)字段下基本都有,我們使用默認(rèn)配置就好啦败潦。
resolveLoader: {
extensions: ['.js', '.json'],
mainFields: ['loader', 'main'],
},
