output.distPath

  • 类型:
type DistPathConfig = {
  root?: string;
  html?: string;
  js?: string;
  jsAsync?: string;
  css?: string;
  cssAsync?: string;
  svg?: string;
  font?: string;
  wasm?: string;
  image?: string;
  media?: string;
  server?: string;
  worker?: string;
};
  • 默认值:
const defaultDistPath = {
  root: 'dist',
  html: '/',
  js: 'static/js',
  jsAsync: 'static/js/async',
  css: 'static/css',
  cssAsync: 'static/css/async',
  svg: 'static/svg',
  font: 'static/font',
  wasm: 'static/wasm',
  image: 'static/image',
  media: 'static/media',
  server: 'server',
  worker: 'worker',
};

设置构建产物的输出目录,Rsbuild 会根据产物的类型输出到对应的子目录下。

其中:

  • root: 表示所有构建产物输出的根目录。
  • html:表示 HTML 文件的输出目录。
  • js:表示 JavaScript 文件的输出目录。
  • jsAsync:表示异步 JavaScript 文件的输出目录,默认会输出到 distPath.jsasync 子目录。
  • css:表示 CSS 文件的输出目录。
  • cssAsync:表示异步 CSS 文件的输出目录,默认会输出到 distPath.cssasync 子目录。
  • svg:表示 SVG 图片的输出目录。
  • font:表示字体文件的输出目录。
  • wasm:表示 WebAssembly 文件的输出目录。
  • image:表示非 SVG 图片的输出目录。
  • media:表示视频等媒体资源的输出目录。
  • server: 表示服务端产物的输出目录,仅在 targetnode 时有效。
  • worker: 表示 worker 产物的输出目录,仅在 targetservice-worker 时有效。

根目录

root 是构建产物的根目录,可以为相对路径或绝对路径。如果 root 的值为相对路径,则会基于当前项目的根目录拼接为绝对路径。

其他目录只能为相对路径,并且会相对于 root 进行输出。

示例

以 JavaScript 文件为例,会输出到 distPath.root + distPath.js 目录,即为 dist/static/js

如果需要将 JavaScript 文件输出到 build/resource/js 目录,可以这样设置:

export default {
  output: {
    distPath: {
      root: 'build',
      js: 'resource/js',
    },
  },
};