webpack學習筆記--配置resolve

Resolve

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

alias

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

// Webpack alias 配置
resolve:{
  alias:{
    components: './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' 。

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']

extensions

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

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

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

假如你想讓 Webpack 優先使用目錄下的 TypeScript 文件，能夠這樣配置：

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

modules

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

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

後，你能夠簡單經過  import 'button'  導入。

descriptionFiles

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

descriptionFiles: ['package.json']

enforceExtension

 resolve.enforceExtension  若是配置爲  true  全部導入語句都必需要帶文件後綴， 例如開啓前  import './foo'  能正常工做，開啓後就必須寫成  import './foo.js' 。

enforceModuleExtension

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