解析

這些選項會變更模組解析方式。Webpack 提供合理的預設值，但可以詳細變更解析方式。請參閱 模組解析，以進一步了解解析器的運作方式。

resolve

物件

設定模組解析方式。例如，在 ES2015 中呼叫 import 'lodash' 時，resolve 選項可以變更 webpack 尋找 'lodash' 的位置（請參閱 modules）。

webpack.config.js

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

resolve.alias

物件

建立別名，以更輕鬆地 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'; // Exact match, so path/to/file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Not an exact match, normal resolution takes place

下表說明其他情況

如果在 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

[字串]: ['browser']

指定一個欄位，例如 browser，根據 此規格 進行解析。

webpack.config.js

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

resolve.cacheWithContext

布林值

如果啟用不安全的快取，則在快取金鑰中包含 request.context。此選項會由 enhanced-resolve 模組考量。當提供 resolve 或 resolveLoader 外掛程式時，解析快取中的 context 會被忽略。這解決了一個效能退化的問題。

resolve.conditionNames

字串陣列

exports 欄位 的條件名稱，定義套件的進入點。

webpack.config.js

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

Webpack 會對 resolve.conditionNames 陣列中所列的 匯出條件 進行比對。

exports 欄位中的鍵順序很重要。在條件比對期間，較早的項目優先，並優先於較後的項目。

例如，

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'],
  },
};

匯入

• 'foo' 會解析為 'foo/index-require.js'
• 'foo/bar' 會解析為 'foo/bar-node.js'，因為在條件匯出物件中 "node" 鍵出現在 "require" 鍵之前。
• 'foo/baz' 會解析為 'foo/baz-node.js'

resolve.descriptionFiles

[字串] = ['package.json']

用於說明的 JSON 檔案。

webpack.config.js

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

resolve.enforceExtension

布林值 = false

如果為 true，則不允許沒有副檔名的檔案。因此，預設情況下，如果 ./foo 有 .js 副檔名，則 require('./foo') 會運作，但如果啟用此選項，則只有 require('./foo.js') 會運作。

webpack.config.js

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

resolve.extensionAlias

物件

將副檔名對應到副檔名別名的物件。

webpack.config.js

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

resolve.extensions

[字串] = ['.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

物件

當正常解析失敗時，重新導向模組請求。

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 核心模組，這表示如果你在瀏覽器或類似環境中執行的程式碼中使用它們，你必須從 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

[字串]

從 npm 套件匯入時，例如 import * as D3 from 'd3'，此選項將決定其 package.json 中哪些欄位會被檢查。預設值會根據 webpack 設定中指定的 target 而有所不同。

當 target 屬性設定為 webworker、web 或未指定時

webpack.config.js

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

對於任何其他目標（包括 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 屬性優先，因為它是 mainFields 中的第一個項目。同時，由 webpack 捆綁的 Node.js 應用程式會先嘗試使用 module 欄位中的檔案進行解析。

resolve.mainFiles

[字串] = ['index']

解析目錄時要使用的檔名。

webpack.config.js

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

resolve.exportsFields

[字串] = ['exports']

package.json 中用於解析模組請求的欄位。請參閱 package-exports 指南 以取得更多資訊。

webpack.config.js

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

resolve.modules

[字串] = ['node_modules']

告訴 webpack 解析模組時應搜尋哪些目錄。

絕對路徑和相對路徑都可以使用，但請注意它們的行為會有些不同。

相對路徑的掃描方式類似於 Node 掃描 node_modules 的方式，它會檢查目前目錄及其上層目錄（例如：./node_modules、../node_modules，以此類推）。

使用絕對路徑時，它只會在指定的目錄中搜尋。

webpack.config.js

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

如果您想新增一個目錄來搜尋，並優先於 node_modules/

webpack.config.js

const path = require('path');

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

resolve.unsafeCache

RegExp [RegExp] 布林值：true

啟用積極但不安全的模組快取。傳遞 true 會快取所有內容。

webpack.config.js

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

正規表示式或正規表示式陣列可用於測試檔案路徑，並僅快取特定模組。例如，僅快取公用程式

webpack.config.js

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

resolve.useSyncFileSystemCalls

布林值

對解析器使用同步檔案系統呼叫。

webpack.config.js

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

resolve.plugins

[外掛程式]

應套用的其他解析外掛程式清單。它允許使用外掛程式，例如 DirectoryNamedWebpackPlugin。

webpack.config.js

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

resolve.preferRelative

布林值

啟用後，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

布林值

解析時優先使用 resolve.roots 的絕對路徑。

webpack.config.js

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

resolve.symlinks

布林值 = true

是否將符號連結解析至其符號連結位置。

啟用後，符號連結資源會解析至其實際路徑，而非符號連結位置。請注意，當使用符號連結套件的工具（例如 npm link）時，這可能會導致模組解析失敗。

webpack.config.js

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

resolve.cachePredicate

函式 (module) => 布林值

一個函式，用於決定是否快取要求。物件會傳遞給具有 path 和 request 屬性的函式。它必須傳回布林值。

webpack.config.js

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

resolve.restrictions

[字串、正規表示式]

解析限制清單，用於限制要求可以解析的路徑。

webpack.config.js

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

resolve.roots

[字串]

目錄清單，用於解析伺服器相對 URL（以 '/' 開頭）的要求，預設為 context 設定選項。在非 Windows 系統上，這些要求會先解析為絕對路徑。

webpack.config.js

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

resolve.importsFields

[字串]

package.json 中的欄位，用於提供套件的內部要求（以 # 開頭的要求視為內部）。

webpack.config.js

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

resolve.byDependency

依據模組要求的類型設定解析選項。

• 類型：[type: string]: ResolveOptions

• 範例

  module.exports = {
    // ...
    resolve: {
      byDependency: {
        // ...
        esm: {
          mainFields: ['browser', 'module'],
        },
        commonjs: {
          aliasFields: ['browser'],
        },
        url: {
          preferRelative: true,
        },
      },
    },
  };

resolveLoader

物件 { 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'],
  },
};