webpack在啟動后會從配置的入口模塊觸發(fā)找出所有依賴的模塊，Resolve配置webpack如何尋找模塊對應(yīng)的文件。webpack內(nèi)置JavaScript模塊化語法解析功能，默認(rèn)會采用模塊化標(biāo)準(zhǔn)里約定好的規(guī)則去尋找，但你可以根據(jù)自己的需要修改默認(rèn)的規(guī)則。

1.module

commonjs中，找包的順序是從當(dāng)前的node_modules下開始尋找，找不到會從外層再去尋找，我們可以使用module字段來指定找包的范圍

output: {
    ...
},
resolve: {
  module: [path.resolve('node_module')] //當(dāng)前目錄的node_module， 但不知道是否是我的原因，只要添加這個字段，就報錯，并且需要重裝webpack-dev-server
},

2.alias

引包時，一般找包的package.json中的“main”字段，但有的情況下，你可能并不想使用main引用的文件，比如我們只要使用bootstrap的樣式，import “bootstrap”；

// bootstrap 的package.json
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",
"main": "dist/js/bootstrap",
"repository": {
  "type": "git",
  "url": "git+https://github.com/twbs/bootstrap.git"
},
...

可以看到，默認(rèn)卻引的是js，那么我們只能手動的改寫引用方式

import 'bootstrap\dist\css\bootstrap.min.css'；  //能達(dá)到效果，但不優(yōu)雅，而且在每個需要的地方都得這樣寫  

resolve中提供了alias字段，方便我們?yōu)橐粋€路徑起“外號”

resolve: {
    // modules: ["node_module"], //當(dāng)前目錄的node_module
    alias: {
      bootstrap: "bootstrap/dist/css/bootstrap.min.css"  //alias在大型項目中及其有用，你不用管再哼哧哼哧的寫大段的文件路徑，只需一個短短的別名，就可解決路徑問題
    }
  },

3. mainFields

這個字段是指定找到包后，引用package.json的那個字段，它是一個數(shù)組，如果沒有這個字段，那么依次查找，找到后引用，因此上例可以這樣：

resolve: {
    // modules: ["node_module"], //當(dāng)前目錄的node_module
    mainFields: ["style", "main"],    // 因為bootstrap中style指向的才是css文件
    // alias: {
    //   bootstrap: "bootstrap/dist/css/bootstrap.css"
    // }
  },

4. mainFiles

也是一個數(shù)組，指的是入口文件的名字，默認(rèn)為index.js

5. extensions

現(xiàn)在，引入文件的時候，必須帶后綴，但是我們可以配置這個字段來指定默認(rèn)后綴查找順序

extensions: [.js, css, .json]  //如果這樣  import 'index',那么壽縣找‘index.js’,找不到后會找‘index.css’,以此類推