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 上编辑此页
上一页tools.cssLoader
下一页tools.lightningcssLoader

#tools.htmlPlugin

  • 类型: boolean | Object | Function
  • 默认值:
const defaultOptions = {
  meta, // 对应 `html.meta` 配置
  title, // 对应 `html.title` 配置
  inject, // 对应 `html.inject` 配置
  favicon, // 对应 `html.favicon` 配置
  template, // 对应 `html.template` 配置
  filename, // 基于 `output.distPath` 和 `entryName` 生成
  templateParameters, // 对应 `html.templateParameters` 配置
  chunks: [entryName],
};

通过 tools.htmlPlugin 可以修改 html-rspack-plugin 的配置项。

Rsbuild 内部基于 html-rspack-plugin 实现 HTML 相关的能力。它是 html-webpack-plugin 的一个 fork 版本,具备完全一致的功能和选项。

TIP

如果你需要修改 title、template、templateParameters、meta 等选项,推荐优先使用 Rsbuild 提供的对应 HTML 配置项,如 html.title、html.template 等。

这是因为这些配置间存在一些关联关系,Rsbuild 对于 HTML 配置项提供了一些内部的优化处理,例如,如果当前项目使用的 HTML 模板中已经包含了 <title> 标签,那么 html.title 将不会生效。

#Object 类型

当 tools.htmlPlugin 的值为 Object 类型时,会与默认配置通过 Object.assign 合并。

export default {
  tools: {
    htmlPlugin: {
      scriptLoading: 'blocking',
    },
  },
};

#Function 类型

当 tools.htmlPlugin 为 Function 类型时:

  • 第一个参数是默认配置的对象,可以直接修改该对象。
  • 第二个参数是也是一个对象,包含了 entry 的名称和 entry 的值。
  • 函数可以 return 一个新的对象作为最终的配置。
export default {
  tools: {
    htmlPlugin(config, { entryName, entryValue }) {
      if (entryName === 'main') {
        config.scriptLoading = 'blocking';
      }
    },
  },
};

#禁用 HTML

将 tools.htmlPlugin 配置为 false,可以禁用 Rsbuild 内置的 html-rspack-plugin 插件,此时将不会生成 HTML 文件。

export default {
  tools: {
    htmlPlugin: false,
  },
};

#示例

#修改 HTML 文件名

通过 filename 选项可以修改 HTML 产物的文件名。

例如,在生产模式构建时,可以在文件名上添加 hash:

export default {
  tools: {
    htmlPlugin(config, { entryName }) {
      if (process.env.NODE_ENV === 'production') {
        config.filename = `${entryName}.[contenthash:8].html`;
      }
    },
  },
};

#HTML 压缩

Rsbuild 目前不对 HTML 文件进行压缩,如果你需要压缩 HTML 文件,可以使用 rsbuild-plugin-html-minifier-terser 插件。