這些選項能設置模塊如何被解析。webpack 提供合理的默認值，但是還是可能會修改一些解析的細節(jié)。關于 resolver 具體如何工作的更多解釋說明，請查看模塊解析。

resolve

?object?

配置模塊如何解析。例如，當在 ES2015 中調用 import 'lodash'，resolve 選項能夠對 webpack 查找 'lodash' 的方式去做修改（查看模塊）。

webpack.config.js

module.exports = {
  //...
  resolve: {
    // configuration options
  },
};

resolve.alias

?object?

創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

現在，替換“在導入時使用相對路徑”這種方式，就像這樣：

import Utility from '../../utilities/utility';

你可以這樣使用別名：

import Utility from 'Utilities/utility';

也可以在給定對象的鍵后的末尾添加 $，以表示精準匹配：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js'),
    },
  },
};

這將產生以下結果：

import Test1 from 'xyz'; // 精確匹配，所以 path/to/file.js 被解析和導入
import Test2 from 'xyz/file.js'; // 非精確匹配，觸發(fā)普通解析

下面的表格展示了一些其他情況：

如果在 ?package.json? 中定義，?index.js? 可能會被解析為另一個文件。

/abc/node_modules 也可能在 /node_modules 中解析。

module.exports = {
  //...
  resolve: {
    alias: {
      _: [
        path.resolve(__dirname, 'src/utilities/'),
        path.resolve(__dirname, 'src/templates/'),
      ],
    },
  },
};

將 ?resolve.alias? 設置為 false 將告知 webpack 忽略模塊。

module.exports = {
  //...
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
};

resolve.aliasFields

[string]: ['browser']

指定一個字段，例如 browser，根據 此規(guī)范進行解析。

webpack.config.js

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser'],
  },
};

resolve.cacheWithContext

?boolean?

如果啟用了不安全緩存，請在緩存鍵(cache key)中引入 request.context。這個選項被 enhanced-resolve 模塊考慮在內。從 webpack 3.1.0 開始，在配置了 resolve 或 resolveLoader 插件時，解析緩存(resolve caching)中的上下文(context)會被忽略。這解決了性能衰退的問題。

resolve.conditionNames

?string[]?

exports 配置項 （定義一個庫的入口）的 conditionName。

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

Webpack 將會匹配列在 resolve.conditionNames 數組中的 export conditions。

exports 字段中的鍵順序很重要。在條件匹配期間，較早的入口具有更高的優(yōu)先級并優(yōu)先于后面的入口。

例如，

package.json

{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

importing

• 'foo' 將解析為 'foo/index-require.js'
• 'foo/bar'將解析為 'foo/bar-node.js'，因為在條件導出對象中， "node" 字段在 "require" 之前。
• 'foo/baz' 將解析為 'foo/baz-node.js'

resolve.descriptionFiles

?[string] = ['package.json']?

用于描述的 JSON 文件。

webpack.config.js

module.exports = {
  //...
  resolve: {
    descriptionFiles: ['package.json'],
  },
};

resolve.enforceExtension

?boolean = false?

如果是 true，將不允許無擴展名文件。默認如果 ./foo 有 .js 擴展，require('./foo') 可以正常運行。但如果啟用此選項，只有 require('./foo.js') 能夠正常工作。

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
  },
};

resolve.extensionAlias

object

一個將拓展名與拓展名別名映射的對象。

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

?[string] = ['.js', '.json', '.wasm']?

嘗試按順序解析這些后綴名。如果有多個文件有相同的名字，但后綴名不同，webpack 會解析列在數組首位的后綴的文件 并跳過其余的后綴。

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

能夠使用戶在引入模塊時不帶擴展：

import File from '../path/to/file';

請注意，以上這樣使用 resolve.extensions 會 覆蓋默認數組，這就意味著 webpack 將不再嘗試使用默認擴展來解析模塊。然而你可以使用 '...' 訪問默認拓展名：

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

resolve.fallback

?object?

當正常解析失敗時，重定向模塊請求。

webpack.config.js

module.exports = {
  //...
  resolve: {
    fallback: {
      abc: false, // do not include a polyfill for abc
      xyz: path.resolve(__dirname, 'path/to/file.js'), // include a polyfill for xyz
    },
  },
};

webpack 5 不再自動 polyfill Node.js 的核心模塊，這意味著如果你在瀏覽器或類似的環(huán)境中運行的代碼中使用它們，你必須從 NPM 中安裝兼容的模塊，并自己包含它們。以下是 webpack 在 webpack 5 之前使用過的 polyfill 包列表：

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

resolve.mainFields

?[string]?

當從 npm 包中導入模塊時（例如，import * as D3 from 'd3'），此選項將決定在 package.json 中使用哪個字段導入模塊。根據 webpack 配置中指定的 target 不同，默認值也會有所不同。

當 target 屬性設置為 webworker, web 或者沒有指定：

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

對于其他任意的 target（包括 node），默認值為：

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'],
  },
};

例如，考慮任意一個名為 upstream 的類庫 package.json 包含以下字段：

{
  "browser": "build/upstream.js",
  "module": "index"
}

在我們 import * as Upstream from 'upstream' 時，這實際上會從 browser 屬性解析文件。在這里 browser 屬性是最優(yōu)先選擇的，因為它是 mainFields 的第一項。同時，由 webpack 打包的 Node.js 應用程序首先會嘗試從 module 字段中解析文件。

resolve.mainFiles

?[string] = ['index']?

解析目錄時要使用的文件名。

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

resolve.exportsFields

?[string] = ['exports']?

在 package.json 中用于解析模塊請求的字段。欲了解更多信息，請查閱 package-exports guideline 文檔。

webpack.config.js

module.exports = {
  //...
  resolve: {
    exportsFields: ['exports', 'myCompanyExports'],
  },
};

resolve.modules

?[string] = ['node_modules']?

告訴 webpack 解析模塊時應該搜索的目錄。

絕對路徑和相對路徑都能使用，但是要知道它們之間有一點差異。

通過查看當前目錄以及祖先路徑（即 ./node_modules, ../node_modules 等等）， 相對路徑將類似于 Node 查找 'node_modules' 的方式進行查找。

使用絕對路徑，將只在給定目錄中搜索。

webpack.config.js

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
  },
};

如果你想要添加一個目錄到模塊搜索目錄，此目錄優(yōu)先于 node_modules/ 搜索：

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

resolve.unsafeCache

?RegExp [RegExp] boolean: true?

啟用，會主動緩存模塊，但并 不安全。傳遞 true 將緩存一切。

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: true,
  },
};

正則表達式，或正則表達式數組，可以用于匹配文件路徑或只緩存某些模塊。 例如，只緩存 utilities 模塊：

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: /src\/utilities/,
  },
};

resolve.useSyncFileSystemCalls

?boolean?

對 resolver 使用同步文件系統(tǒng)調用。

webpack.config.js

module.exports = {
  //...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolve.plugins

?[Plugin]?

應該使用的額外的解析插件列表。 它允許插件，如 DirectoryNamedWebpackPlugin。

webpack.config.js

module.exports = {
  //...
  resolve: {
    plugins: [new DirectoryNamedWebpackPlugin()],
  },
};

resolve.preferRelative

?boolean?

當啟用此選項時，webpack 更傾向于將模塊請求解析為相對請求，而不使用來自 node_modules 目錄下的模塊。

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// let's say `src/logo.svg` exists
import logo1 from 'logo.svg'; // this is viable when `preferRelative` enabled
import logo2 from './logo.svg'; // otherwise you can only use relative path to resolve logo.svg

// `preferRelative` is enabled by default for `new URL()` case
const b = new URL('module/path', import.meta.url);
const a = new URL('./module/path', import.meta.url);

resolve.preferAbsolute

?boolean?

?5.13.0+?

解析時，首選的絕對路徑為 resolve.roots。

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.symlinks

?boolean = true?

是否將符號鏈接(symlink)解析到它們的符號鏈接位置(symlink location)。

啟用時，符號鏈接(symlink)的資源，將解析為其 真實 路徑，而不是其符號鏈接(symlink)的位置。注意，當使用創(chuàng)建符號鏈接包的工具（如 npm link）時，這種方式可能會導致模塊解析失敗。

webpack.config.js

module.exports = {
  //...
  resolve: {
    symlinks: true,
  },
};

resolve.cachePredicate

?function(module) => boolean?

決定請求是否應該被緩存的函數。函數傳入一個帶有 path 和 request 屬性的對象。 必須返回一個 boolean 值。

webpack.config.js

module.exports = {
  //...
  resolve: {
    cachePredicate: (module) => {
      // additional logic
      return true;
    },
  },
};

resolve.restrictions

?[string, RegExp]?

解析限制列表，用于限制可以解析請求的路徑。

webpack.config.js

module.exports = {
  //...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

?[string]?

一個目錄列表，用于解析以斜杠（'/'）開頭的服務器相對URL的請求，默認為上下文配置選項。在非Windows系統(tǒng)上，這些請求首先被解析為絕對路徑。

webpack.config.js

const fixtures = path.resolve(__dirname, 'fixtures');
module.exports = {
  //...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.importsFields

?[string]?

用于提供包內部請求的 package.json 中的字段（以 # 開頭的請求被視為內部請求）。

webpack.config.js

module.exports = {
  //...
  resolve: {
    importsFields: ['browser', 'module', 'main'],
  },
};

resolve.byDependency

通過 module 請求類型來配置 resolve 選項。

• Type: ?[type: string]?: ResolveOptions
• Example:module.exports = ?{ // ... resolve: { byDependency: { // ... esm: { mainFields: ['browser', 'module'], }?, ?commonjs: { aliasFields: ['browser'], }, url: { preferRelative: true, }, }, }, };?

resolveLoader

?object { modules [string] = ['node_modules']?, ?extensions [string] = ['.js', '.json']?, ?mainFields [string] = ['loader', 'main']}?

這組選項與上面的 resolve 對象的屬性集合相同， 但僅用于解析 webpack 的 loader 包。

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};