解析#

用於設定 Rspack 模組解析邏輯。

• 類型： Object

resolve.alias#

• 類型： Record<string, false | string | (string | false)[]>
• 預設值： {}

路徑別名，例如：

此時

• require("@/a") 將嘗試解析 <root>/src/a。
• require("abc") 將嘗試解析 <root>/src/abc。
• require("abc/file.js") 不會匹配，它會嘗試解析 node_modules/abc/file.js。

resolve.aliasFields#

• 類型： string[]
• 預設值： ['browser']

定義一個欄位，例如 browser，應根據 此規範 進行解析。

resolve.conditionNames#

• 類型： string[]
• 預設值： []

與 Node.js 的 conditionNames 相同，用於 package.json 中的 exports 和 imports 欄位。

resolve.descriptionFiles#

• 類型： string[]
• 預設值： ['package.json']

用於描述的 JSON 檔案。

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

resolve.enforceExtension#

• 類型： boolean

預設情況下，如果 resolve.extensions 包含空字串，則會變為 true；否則，此值會變為 false。

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

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

resolve.extensions#

• 類型： string[]
• 預設值： [".js", ".json", ".wasm"]

依序解析模組，例如，require('. /index') 將嘗試解析 '. /index.js'、'. /index.json'...

resolve.extensionAlias#

• 類型： Record<string, string[] | string>
• 預設值： {}

定義副檔名的別名。例如：

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

這對於 TypeScript 專案特別有用，因為 TypeScript 建議使用 .js 副檔名來參考 TypeScript 檔案。

import { foo } from './foo.js'; // actually refers to `foo.ts`

當解析 import './foo.js' 時，Rspack 將嘗試依序解析 './foo.ts' 和 ./foo.js'。

resolve.fallback#

• 類型： Record<string, false | string>
• 預設值： {}

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

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

Rspack 不會自動填補 Node.js 核心模組，這表示如果您在瀏覽器或類似環境中運行的程式碼中使用它們，您必須從 NPM 安裝相容的模組並自行包含它們。

您可以使用 node-polyfill-webpack-plugin 來自動填補 Node.js 核心 API。

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

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

或參考 webpack 4 使用的 Node.js 填補程式清單

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.importsFields#

• 類型： string[]
• 預設值： ["imports"]

自訂 package.json 中的 imports 欄位，該欄位用於提供套件的內部請求（以 # 開頭的請求被視為內部）。

例如：

當此設定為 ["testImports", "imports"] 時，目前套件中 import value from '#foo' 的結果為 src/test/foo.js。

resolve.mainFields#

• 類型： string[]
• 預設值
  • 當 target 為 web 時，target 為 ["browser", "module", "main"]
  • ["module", "main"] 用於其他情況

嘗試解析 package.json 中的欄位，例如：

// package.json
{
  "name": "lib",
  "module": "es/index.js"
}

然後 import value from 'lib' 會解析為 lib/es/index.js。

resolve.mainFiles#

• 類型： string[]
• 預設值： ["index"]

解析目錄時的檔案名稱後綴，例如 require('. /dir/') 將嘗試解析 '. /dir/index'。

resolve.exportsFields#

• 類型： string[]
• 預設值： ["exports"]

自訂 package.json 中的 exports 欄位，例如：

// lib/package.json
{
  "name": "lib",
  "testExports": {
    ".": "./test.js"
  },
  "exports": {
    ".": "./index.js"
  }
}

當此設定為 ["testExports", "exports"] 時，import value from 'lib' 的結果會是 lib/test.js。

resolve.modules#

• 類型： string[]
• 預設值： ["node_modules"]

解析依賴時使用的目錄名稱。

resolve.preferRelative#

• 類型： boolean
• 預設值： false

啟用時，require('file') 會先在目前目錄中尋找 . /file 檔案，而不是 <modules>/file。

resolve.preferAbsolute#

• 類型： boolean
• 預設值： false

在相對於 resolve.roots 解析時，選擇絕對路徑。

resolve.tsConfig#

• 類型： string | object | undefined
• 預設值： undefined

Rspack 中 tsconfig-paths-webpack-plugin 的替代方案。

module.exports = {
  resolve: {
    // string
    tsConfig: path.resolve(__dirname, './tsconfig.json'),
    // or object
    tsConfig: {
      configFile: path.resolve(__dirname, './tsconfig.json'),
      references: 'auto',
    },
  },
};

點擊查看範例.

resolve.tsConfig.configFile#

• 類型： string

如果您透過選項傳遞 tsconfig.json 的路徑，Rspack 將嘗試根據 tsconfig.json 的 paths 和 baseUrl 解析模組，功能上等同於 tsconfig-paths-webpack-plugin。

resolve.tsConfig.references#

• 類型： string[] | "auto" | undefined
• 預設值： undefined

支援 tsconfig 專案參考，定義於 tsconfig-paths-webpack-plugin 中。

tsconfig 路徑列表可以手動提供，或者您可以指定 auto 以自動從 tsconfig.references 讀取路徑列表。

當值為 undefined 時，此功能會停用。

resolve.fullySpecified#

• 類型： boolean
• 預設值： false

不再解析擴展名，不再解析 package.json 中的 mainFiles (但不影響來自 mainFiles、browser、alias 的請求)。

resolve.restrictions#

• 類型： string[]
• 預設值： []

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

resolve.roots#

• 類型： string[]
• 預設值： []

解析以 '/' 開頭的伺服器相對 URL 的目錄列表。預設為 context 組態選項。在 Windows 以外的系統上，這些請求最初會解析為絕對路徑。

resolve.symlinks#

• 類型： boolean
• 預設值： true

是否將符號連結解析到它們的符號連結位置。

啟用時，符號連結的資源會解析到它們的真實路徑，而不是它們的符號連結位置。請注意，當使用符號連結套件的工具 (例如 npm link) 時，這可能會導致模組解析失敗。

resolve.byDependency#

• 類型： Record<string, Resolve>。

根據模組類型自訂 Resolve 設定。