resolve屬性的配置
1、做什么用的？
用來(lái)定義webpack如何查找模塊對(duì)應(yīng)的文件
2、常用配置
resolve:{
//定義查找目錄順序 查找import包的時(shí)候 先找 node_modules 目錄，若找不到就找 myPackageDir目錄
modules:["node_modules","myPackageDir"],
//定義別名 定義某些包的真實(shí)加載路徑
alias: {
//定義 import bootstrap 包的時(shí)候去 "bootstrap/dist/style/bootstrap.css"目錄加載
bootstrap: "bootstrap/dist/style/bootstrap.css",
//定義 componets 關(guān)鍵字被解析為'./src/components/'
//比如我們要引用 './src/components/toast.vue',
// 如果我們定義了以下這個(gè)配置 則引用時(shí)可直接寫為
// import toast from "components/toast.vue"
componets: './src/components/'
},
//引用模塊時(shí)，省略擴(kuò)展名，定義模塊查找順序
// 實(shí)例 import "./style"; 其實(shí)就是先找 style.js,如果發(fā)現(xiàn)沒有就找style.css,找到了就不再往下找，沒找到就繼續(xù)
extensions:[".js",".css",".json",".vue"]
}
webpack在啟動(dòng)后會(huì)從配置的入口模塊觸發(fā)找出所有依賴的模塊，Resolve配置webpack如何尋找模塊對(duì)應(yīng)的文件。webpack內(nèi)置JavaScript模塊化語(yǔ)法解析功能，默認(rèn)會(huì)采用模塊化標(biāo)準(zhǔn)里約定好的規(guī)則去尋找，但你可以根據(jù)自己的需要修改默認(rèn)的規(guī)則。
1. alias
resolve.alias配置項(xiàng)通過別名來(lái)把原來(lái)導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑。如下：
//webpack alias配置
resolve: {
alias: {
componets: './src/components/'
}
}
當(dāng)你通過import Button from 'components/button'導(dǎo)入時(shí)，實(shí)際上被alias等價(jià)替換成import Button from './src/components/button'。
以上alias配置的含義是把導(dǎo)入語(yǔ)句里的components關(guān)鍵字替換成./src/components。
這
樣做可能會(huì)命中太多的導(dǎo)入語(yǔ)句， alias還支持$符號(hào)來(lái)縮小范圍只命中以關(guān)鍵字結(jié)尾的導(dǎo)入語(yǔ)句：
resolve: {
alias: {
'react$' : '/path/to/react.min.js'
}
}
這樣react$只會(huì)命中以react結(jié)尾的導(dǎo)入語(yǔ)句，即只會(huì)把import react關(guān)鍵字替換成import '/path/to/react.min.js'
2. mainFields
有一些第三方模塊會(huì)針對(duì)不同環(huán)境提供幾份代碼。例如分別提供采用ES5 和 ES6的2份代碼，這2份代碼的位置寫在package.json文件里：
{
"jsnext: main": "es/index.js", //采用ES6語(yǔ)法的代碼入口文件
"main": "lib/index.js"http://采用ES5語(yǔ)法的代碼入口文件
}
webpack會(huì)根據(jù)mainFields的配置去決定有限采用哪份代碼， mainFields默認(rèn)如下：
mainFields: ['browser', 'main']
webpack會(huì)按照數(shù)組里的順序去package.json文件里面找，只會(huì)使用找到的第一個(gè)。
假如我們想要ES6的那份代碼，可以這樣進(jìn)行配置：
mainFields: ['jsnext:main', 'browser', 'main']
3. extensions
在導(dǎo)入語(yǔ)句沒帶文件后綴時(shí)，webpack會(huì)自動(dòng)帶上后綴去嘗試訪問文件是否存在。resolve.extensions用于配置在嘗試過程中用到的后綴列表，默認(rèn)是：
extensions:['.js', '.json']
也就是說當(dāng)遇到require('./data')這樣的導(dǎo)入語(yǔ)句時(shí)，webpack會(huì)先去尋找./data.js文件，如果找不到則去找./data.json文件，如果還是找不到則會(huì)報(bào)錯(cuò)。
4. modules
resolve.modules配置webpack去哪些目錄下尋找第三方模塊。默認(rèn)是去node_modules目錄下尋找。有時(shí)你的項(xiàng)目中會(huì)有一些模塊大量被其他模塊依賴和導(dǎo)入，由于其他模塊的位置分布不定，針對(duì)不同的文件都要去計(jì)算被導(dǎo)入模塊文件的相對(duì)路徑，這個(gè)路徑有時(shí)候會(huì)很長(zhǎng)，例如：import './../../components/button'，這時(shí)你可以利用modules配置項(xiàng)優(yōu)化，假如那些大量導(dǎo)入的模塊都在./src/components目錄下：
modules:['./src/components', 'node_modules']
5. descriptionFiles
resolve.descriptionFiles配置描述第三方模塊的文件名稱，也就是package.json文件。默認(rèn)如下：
descriptionFiles: ['package.json']
6. enforceExtension
resolve.enforceExtension如果配置為true，所有導(dǎo)入語(yǔ)句都必須帶文件后綴。
7. enforceModuleExtension
enforceModuleExtension 和 enforceExtension 作用類似，但 enforceModuleExtension 只對(duì) node_modules 下的模塊生效。 enforceModuleExtension 通常搭配 enforceExtension 使用，在 enforceExtension:true 時(shí)，因?yàn)榘惭b的第三方模塊中大多數(shù)導(dǎo)入語(yǔ)句沒帶文件后綴， 所以這時(shí)通過配置 enforceModuleExtension:false 來(lái)兼容第三方模塊。
