close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页output.emitCss
下一页output.filenameHash

#output.externals

  • 类型:
type Externals =
  | string
  | object
  | function
  | RegExp
  | Array<string | object | function | RegExp>;
  • 默认值: undefined

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

更多用法供参考:Rspack Externals。

#示例

#基础用法

将 react-dom 依赖从构建产物中剔除。为了在运行时获取这个模块, react-dom 的值将全局检索 ReactDOM 变量。

rsbuild.config.ts
export default {
  output: {
    externals: {
      'react-dom': 'ReactDOM',
    },
  },
};

#数组格式

使用数组来定义多个 externals 配置:

rsbuild.config.ts
export default {
  output: {
    externals: [
      {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
      'lodash',
    ],
  },
};

#配合 CDN 使用

一个常见的用法是从 CDN 加载一些库,将它们从构建产物中排除,通过 html.tags 配置将它们引入到 HTML 中。

rsbuild.config.ts
export default {
  output: {
    externals: {
      axios: 'axios',
    },
  },
  html: {
    tags: [
      {
        tag: 'script',
        append: false,
        attrs: {
          defer: true,
          crossorigin: true,
          src: 'https://unpkg.com/axios@1/dist/axios.min.js',
        },
      },
    ],
  },
};

然后,你可以在源代码中使用外部库:

src/api.js
const response = await window.axios.get('/api/users');

#正则表达式模式

使用正则表达式来匹配具有特定模式的多个模块:

rsbuild.config.ts
export default {
  output: {
    externals: [
      // 外部化所有 @babel 包
      /^@babel\/.+$/,
      // 外部化所有 lodash 子模块
      /^lodash\/.+$/,
    ],
  },
};
TIP

当 output.target 为 web-worker 时,externals 将不会生效。这是因为 Web Worker 环境不支持访问全局变量。