output

与构建产物相关的选项。

output.assetPrefixoutput.charsetoutput.charset

使用该选项设置静态资源的 URL 前缀,比如设置为 CDN 地址。

在 Rslib 中,该选项的默认值由 format 决定:

  • formatcjsesm 时,默认值为 "auto"
  • formatmfumd 时,默认值为 "/"

output.assetPrefix 设置为 "auto" 时,Rslib 会自动将 importMode 设置为 "preserve",以保留 JavaScript 文件中引用静态资源的 importrequire 语句。同时,CSS 文件中的静态资源会保留相对引用路径,详情可以查看 引用静态资源

output.assetPrefix 设置为具体的路径时,JavaScript 文件中引用静态资源的 importrequire 语句会被替换为包含该前缀的 URL。同时,CSS 文件中的静态资源会被直接替换为带有该前缀的路径。

output.charsetoutput.charsetoutput.charset

指定输出文件的 字符编码,以确保它们在不同的环境中能够正确显示。

output.cleanDistPathoutput.cleanDistPathoutput.cleanDistPath

是否在构建开始前清理产物目录下的所有文件(产物目录默认为 dist)。

output.copyoutput.copyoutput.copy

将指定的文件或目录拷贝到构建输出目录中,基于 rspack.CopyRspackPlugin 实现。

output.cssModulesoutput.cssModulesoutput.cssModules

用于自定义 CSS Modules 配置。

output.dataUriLimitoutput.dataUriLimitoutput.dataUriLimit

设置图片、字体、媒体等静态资源被自动内联为 base64 的体积阈值。

formatcjsesm 时,Rslib 默认会将 output.dataUriLimit 设置为 0,不内联任何静态资源,以便于应用侧的构建工具处理和优化。

output.distPathoutput.distPathoutput.distPath

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

Rslib 默认将 output.distPath 设置为:

const defaultDistPath = {
  root: 'dist',
  js: './',
  jsAsync: './',
  css: './',
  cssAsync: './',
  svg: 'static/svg',
  font: 'static/font',
  wasm: 'static/wasm',
  image: 'static/image',
  media: 'static/media',
  assets: 'static/assets',
};

output.emitCssoutput.emitCssoutput.emitCss

是否将 CSS 输出到产物中。

output.externalsoutput.externalsoutput.externals

在构建时,防止将代码中某些 import 的依赖包打包到 bundle 中,而是在运行时再去从外部获取这些依赖。

在 bundle 模式下,Rslib 会默认将 package.jsondependenciesoptionalDependenciespeerDependencies 字段下的三方依赖添加到 output.externals 中, 查看 lib.autoExternal 了解更多信息。

NOTE

需要注意的是,output.externalsresolve.alias 有所不同。请查看 resolve.alias 文档以了解更多信息。

output.filenameHashoutput.filenameHashoutput.filenameHash

在生产模式构建后,是否在产物的文件名中添加 hash 值。

Rslib 默认将 output.filenameHash 设置为 false

文件名中的 hash 值

默认情况下,Rslib 不会在文件名中间添加 hash 值。

要开启这个行为,你可以将 output.filenameHash 设置为 true

你也可以通过设置 output.filename 为不同类型的文件指定不同的名称。

output.filenameoutput.filenameoutput.filename

设置构建产物的名称。

Rslib 默认会根据 format 设置 output.filename.js 来修改 JavaScript 产物文件的扩展名,详情可查看 autoExtension

output.inlineScriptsoutput.inlineScriptsoutput.inlineScripts

用来控制是否用 <script> 标签将产物中的 script 文件(.js 文件)inline 到 HTML 中。

output.inlineStylesoutput.inlineStylesoutput.inlineStyles

用来控制是否用 <style> 标签将产物中的 style 文件(.css 文件)inline 到 HTML 中。

output.legalCommentsoutput.legalCommentsoutput.legalComments

配置 legal comment 的处理方式。

output.manifestoutput.manifestoutput.manifest

是否生成 manifest 文件,该文件包含所有构建产物的信息、以及入口模块与构建产物间的映射关系。

output.minifyoutput.minifyoutput.minify

用于设置是否在生产模式下开启代码压缩,或是配置压缩工具的选项。

在未指定 output.minify 时,Rslib 会使用一个合理的默认值。

  • 在 format 为 esm, cjs 以及 umd 时,只会执行死代码消除和未使用代码消除,默认值为:
export default defineConfig({
  output: {
    minify: {
      js: true,
      css: false,
      jsOptions: {
        minimizerOptions: {
          mangle: false,
          minify: false,
          compress: {
            defaults: false,
            unused: true,
            dead_code: true,
            toplevel: true,
          },
          format: {
            comments: 'some',
            preserve_annotations: true,
          },
        },
      },
    },
  },
});
  • 在 format 为 mf 时,由于 MF 资源通过网络加载,这意味着它们不会被应用项目压缩。因此,需要在 Rslib 中对它们进行压缩。默认值为:
export default defineConfig({
  output: {
    minify: {
      js: true,
      css: false,
      jsOptions: {
        minimizerOptions: {
          mangle: false,
          // 启用压缩
          minify: true,
          compress: {
            defaults: false,
            unused: true,
            dead_code: true,
            // 避免 remoteEntry 的全局变量被 tree-shaking
            toplevel: false,
          },
          format: {
            comments: 'some',
            preserve_annotations: true,
          },
        },
      },
    },
  },
});
NOTE

需要注意的是,你配置的 output.minify 选项会完全覆盖上述默认配置。

output.overrideBrowserslistoutput.overrideBrowserslistoutput.overrideBrowserslist

指定项目兼容的目标浏览器范围。

Rslib 默认会根据 syntax 生成 output.overrideBrowserslist,查看 ESX_TO_BROWSERSLIST 获取映射值。

output.polyfilloutput.polyfilloutput.polyfill

控制 polyfills 的注入方式。

WARNING

Rsbuild 的 output.polyfill 会将 polyfills 注入到全局作用域中,这可能会意外地修改库消费者的全局变量。对于非全局的 polyfill 方案,请参考 Polyfill - 浏览器

output.sourceMapoutput.sourceMapoutput.sourceMap

用于设置是否生成 source map 文件,以及生成哪一种格式的 source map。

output.targetoutput.targetoutput.target

用于设置 Rsbuild 的构建产物类型。

Rslib 默认将 output.target 设置为 node

INFO

请查看 解决方案 了解更多关于构建产物的信息。