CC 4.0 协议声明

本节内容派生于以下链接指向的内容 ,并遵守 CC BY 4.0 许可证的规定。

以下内容如果没有特殊声明,可以认为都是基于原内容的修改和删减后的结果。

Resolve

模块解析:该选项用于配置 Rspack 模块解析逻辑。

  • 类型: Object

resolve.alias

  • 类型: Record<string, false | string | (string | false)[]>
  • 默认值: {}

路径别名,例如:

{
  "@": path.resolve(__dirname, './src'),
  "abc$": path.resolve(__dirname, './src/abc')
}

此时:

  • require("@/a") 会尝试解析 <root>/src/a
  • require("abc") 会尝试解析 <root>/src/abc
  • require("abc/file.js") 不会命中匹配规则,它会尝试去解析 node_modules/abc/files.js

resolve.aliasFields

  • 类型: string[]
  • 默认值:['browser']

定义一个字段,例如 browser,以依照此规范进行解析。

resolve.conditionNames

  • 类型: string[]
  • 默认值: []

与 node 的 conditionNames 相同,用于 package.json 中的 exportsimports 字段。

resolve.descriptionFiles

  • 类型: string[]
  • 默认值: ['package.json']

用于描述的 JSON 文件。

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

resolve.enforceExtension

  • 类型: boolean

默认情况下,当 resolve.extensions 包含空字符串时,enforceExtension 会设置为 true;否则,将设置为 false

如果是 true,将不允许无扩展名文件。默认如果 ./foo.js 扩展,require('./foo') 可以正常运行。但如果启用此选项,只有 require('./foo.js') 能够正常工作。

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

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.extensions

  • 类型: string[]
  • 默认值: [".js", ".json", ".wasm"]

按照顺序解析模块,例如 require('./index'),会依次尝试解析 './index.js''./index.json'...

resolve.extensionAlias

  • 类型: Record<string, string[] | string>
  • 默认值: {}

定义拓展名的别名,例如:

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

这对于 TypeScript 项目来说非常有用,因为 TypeScript 推荐使用 .js 扩展名来引用 TypeScript 文件。

index.ts
import { foo } from './foo.js'; // 实际引用的是 foo.ts

Rspack 在解析 import './foo.js' 时,会依次尝试解析 './foo.ts'./foo.js

resolve.fallback

  • 类型: Record<string, false | string>
  • 默认值: {}

当常规解析失败时重定向模块请求。

rspack.config.js
module.exports = {
  //...
  resolve: {
    fallback: {
      abc: false, // 不为 abc 引入 polyfill
      xyz: path.resolve(__dirname, 'path/to/file.js'), // 为 xyz 引入 polyfill
    },
  },
};

Rspack 默认不会为 Node.js 核心模块提供 polyfills,这意味着如果你在浏览器或类似环境中运行的代码中使用它们,你将需要从 NPM 安装兼容的模块并自行包含它们。

你可以使用 node-polyfill-webpack-plugin 来自动 polyfill Node.js 核心模块。

rspack.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

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

或者参考 webpack 4 使用的 Node.js polyfills 列表:

rspack.config.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 字段,用于提供包的内部请求(以 # 开头的请求被视为内部请求)

例如:

package.json
{
  "name": "lib",
  "imports": {
    "#foo": "./src/foo.js",
    "#common/*": "./src/common/*.js"
  },
  "testImports": {
    "#foo": "./src/test/foo.js"
  }
}

则当配置为 ["testImports", "imports"] 时, 当前包内 import value from '#foo' 的结果为 src/test/foo.js

resolve.mainFields

  • 类型: string[]
  • 默认值: 根据 target 选项确定

当从 npm 包导入时,例如 import React from 'react'resolve.mainFields 用于确定其 package.json 中的哪些字段会被解析。

target 配置为 'web', 'webworker', 或未指定时,默认值为 ["browser", "module", "main"]

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

对于任何其他 target(包括 'node'), 默认值为 ["module", "main"]

rspack.config.js
module.exports = {
  resolve: {
    mainFields: ['module', 'main'],
  },
};

例如,对于一个名为 foo 的库,它的 package.json 包含以下字段:

package.json
{
  "name": "foo",
  "browser": "./dist/browser.js",
  "module": "./dist/module.js"
}

import foo from 'foo' 时,Rspack 会解析到 browser 字段中的模块,因为 browser 字段在 mainFields 数组中优先级最高。

resolve.mainFiles

  • 类型: string[]
  • 默认值: ["index"]

解析目录时的文件名后缀,例如 require('./dir/') 会尝试解析 './dir/index'

可以配置多个文件名后缀:

rspack.config.js
module.exports = {
  resolve: {
    mainFiles: ['index', 'main'],
  },
};

resolve.modules

  • 类型: string[]
  • 默认值: ["node_modules"]

解析依赖时的目录名。

resolve.preferRelative

  • 类型: boolean
  • 默认值: false

当开启时,require('file') 会首先寻找当前目录下的 ./file 文件,而不是 <modules>/file

resolve.preferAbsolute

  • 类型: boolean
  • 默认值:false

在解析时,倾向使用与 resolve.roots 相关的绝对路径。

resolve.tsConfig

Rspack 中用来替代 tsconfig-paths-webpack-plugin 的配置。

  • 类型: string | object | undefined
  • 默认值: undefined
rspack.config.js
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 中 的 pathsbaseUrl 来寻找模块,其功能等同于 tsconfig-paths-webpack-plugin

resolve.tsConfig.references

  • 类型: string[] | "auto" | undefined
  • 默认值: undefined

支持 tsconfig-paths-webpack-plugin 中定义的 tsconfig project references.

可以通过文件路径用于手动配置,或者使用 auto 用于自动读取 tsconfig.references 中的文件路径。

使用 undefined 将会关闭该功能。

resolve.fullySpecified

  • 类型: boolean
  • 默认值: false

不再解析扩展名,不再解析 package.json 中的 mainFiles(但不会影响来自 mainFiles, browser, alias 的请求)。

resolve.restrictions

  • 类型: string[]
  • 默认值:[]

限制请求解析路径的解析限制列表。

resolve.roots

  • 类型: string[]
  • 默认值:[]

一个目录列表,用于解析服务器相对 URL(以'/'开头的 URL)。默认使用 context 配置选项。在非 Windows 系统上,这些请求首先作为绝对路径进行解析。

  • 类型: boolean
  • 默认值:true

是否将符号链接(symlink)解析到它们的符号链接位置(symlink location)。

启用时,符号链接的资源,将解析为其真实路径,而不是其符号链接的位置。注意,当使用创建符号链接包的工具(如 npm link)时,这种方式可能会导致模块解析失败。

resolve.byDependency

  • 类型: Record<string, Resolve>.

依据模块类型自定义 Resolve 配置。