深刻淺出webpack學習(5)--Resolve

Resolve

webpack在啓動後會從配置的入口模塊觸發找出全部依賴的模塊，Resolve配置webpack如何尋找模塊對應的文件。webpack內置JavaScript模塊化語法解析功能，默認會採用模塊化標準里約定好的規則去尋找，但你能夠根據本身的須要修改默認的規則。

1. alias

resolve.alias配置項經過別名來把原來導入路徑映射成一個新的導入路徑。以下：

//webpack alias配置
resolve: {
    alias: {
        componets: './src/components/'
    }
}

當你經過import Button from 'components/button'導入時，實際上被alias等價替換成import Button from './src/components/button'。

以上alias配置的含義是把導入語句裏的components關鍵字替換成./src/components。

這

樣作可能會命中太多的導入語句， alias還支持$符號來縮小範圍只命中以關鍵字結尾的導入語句：

resolve: {
    alias: {
        'react$' : '/path/to/react.min.js'
    }
}

這樣react$只會命中以react結尾的導入語句，即只會把import react關鍵字替換成import '/path/to/react.min.js'

2. mainFields

有一些第三方模塊會針對不一樣環境提供幾份代碼。例如分別提供採用ES5 和 ES6的2份代碼，這2份代碼的位置寫在package.json文件裏：

{
    "jsnext: main": "es/index.js", //採用ES6語法的代碼入口文件
    "main": "lib/index.js"//採用ES5語法的代碼入口文件
}

webpack會根據mainFields的配置去決定有限採用哪份代碼， mainFields默認以下：

mainFields: ['browser', 'main']

webpack會按照數組裏的順序去package.json文件裏面找，只會使用找到的第一個。

假如咱們想要ES6的那份代碼，能夠這樣進行配置：

mainFields: ['jsnext:main', 'browser', 'main']

3. extensions

在導入語句沒帶文件後綴時，webpack會自動帶上後綴去嘗試訪問文件是否存在。resolve.extensions用於配置在嘗試過程當中用到的後綴列表，默認是：

extensions:['.js', '.json']

也就是說當遇到require('./data')這樣的導入語句時，webpack會先去尋找./data.js文件，若是找不到則去找./data.json文件，若是仍是找不到則會報錯。

4. modules

resolve.modules配置webpack去哪些目錄下尋找第三方模塊。默認是去node_modules目錄下尋找。有時你的項目中會有一些模塊大量被其餘模塊依賴和導入，因爲其餘模塊的位置分佈不定，針對不一樣的文件都要去計算被導入模塊文件的相對路徑，這個路徑有時候會很長，例如：import './../../components/button'，這時你能夠利用modules配置項優化，假如那些大量導入的模塊都在./src/components目錄下：

modules:['./src/components', 'node_modules']

5. descriptionFiles

resolve.descriptionFiles配置描述第三方模塊的文件名稱，也就是package.json文件。默認以下：

descriptionFiles: ['package.json']

6. enforceExtension

resolve.enforceExtension若是配置爲true，全部導入語句都必須帶文件後綴。

7. enforceModuleExtension

enforceModuleExtension 和 enforceExtension 做用相似，但 enforceModuleExtension 只對 node_modules 下的模塊生效。 enforceModuleExtension 一般搭配 enforceExtension 使用，在 enforceExtension:true 時，由於安裝的第三方模塊中大多數導入語句沒帶文件後綴， 因此這時經過配置 enforceModuleExtension:false 來兼容第三方模塊。