设置构建产物的名称。
在生产模式构建后,Rsbuild 会自动在文件名中间添加 hash 值,如果不需要添加,可以将 output.filenameHash 设置为 false 来禁用该行为。
Rsbuild 会基于 output.filename 和 output.distPath 来生成最终的文件路径。
查看 构建产物 了解更多。
output.filename 可以为不同类型的文件设置不同的名称。
下面是 output.filename 中各个选项的说明:
html:HTML 文件的名称。js:JavaScript 文件的名称。css:CSS 样式文件的名称。svg:SVG 图片的名称。font:字体文件的名称。wasm: Wasm 文件的名称。image:非 SVG 图片的名称。media:视频等媒体资源的名称。assets:其他静态资源的名称。例如 扩展静态资源类型 中定义的资源。修改 JavaScript 文件的名称为 [name]_script.js:
为开发和生产构建设置不同的文件名:
通常来说,Rsbuild 只会在生产模式下设置文件名的 hash 值(即 process.env.NODE_ENV === 'production' 时)。
如果你在开发模式下设置了文件名的 hash,那么可能会导致热更新不生效(尤其是 CSS 文件)。这是因为每次文件内容变化时,都会引起 hash 变化,导致打包工具无法读取到最新的文件内容。
在 output.filename 的值中,你可以使用模板字符串来动态生成文件名。
常用的模板字符串有:
[name] - entry 名称,即 source.entry 的 key。[contenthash] - 基于文件内容生成的 hash 值。[contenthash:<length>] - 基于文件内容生成的 hash 值,并指定 hash 长度。[ext] - 文件后缀名,包含点号。更多模板字符串可以参考 Rspack - Template String。
filename.html 只能使用部分模板字符串,如 [name]、[contenthash:<length>]。filename.js 和 filename.css 不支持 [ext]。当你在代码中通过 dynamic import 的方式引入模块时,该模块会被单独打包成一个文件,它默认的命名规则如下:
dist/static/js/async/src_add_ts.js。dist/static/js/async/798.27e3083e.js,这是为了避免在生产模式中泄露源代码的路径,同时字符数也更少。如果你希望为异步模块指定一个固定的名称,可以通过 Rspack 提供的 magic comments 来实现,通过 webpackChunkName 指定模块名称:
通过以上写法指定模块名称后,生成的文件会是 dist/static/js/async/my-chunk-name.js。
你可以传入一个函数来根据文件信息动态设置文件名。
这个函数接收两个参数:
pathData:一个对象,包含文件路径信息。assetInfo:一个可选的对象,包含额外的资源信息。为 JavaScript 文件动态设置文件名:
为 CSS 文件动态设置文件名:
为图片文件动态设置文件名:
output.filename.html 暂不支持使用函数。
如果你需要在资源的 URL query 上生成 hash 值,可以参考以下配置:
在这种情况下,JS、CSS 的文件名将不包含 hash,而 HTML 中的 URL 将包含 hash query。