bud.html
bud.html is used to configure your application's HTML wrapper.
Usage
bud.html can be called without passing any options.
bud.config.mjs
export default async bud => {
bud.html()
}
The default template will source a couple variables from .env
; you'll want to make sure they are set.
.env
PUBLIC_APP_TITLE='My App'
PUBLIC_APP_DESCRIPTION='My App Description'
Customization
You can customize the generated HTML using an options object. It accepts everything HTMLWebpackPlugin
does.
bud.config.mjs
export default async bud => {
bud.html({
title: 'My App',
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
template: bud.path(`public/index.html`),
minify: false,
inject: false,
})
}
Using a custom template
The path to this file will be resolved relative to the project root:
bud.config.mjs
export default async bud => {
bud.html({
template: 'index.html',
})
}
Define your template as an absolute path if this doesn't work for you:
bud.config.mjs
export default async bud => {
bud.html({
template: bud.path(`public/index.html`),
})
}
Defining template variables
Add template variables using replace
.
bud.config.js
export default async bud => {
bud.html({
template: bud.path(`public/index.html`),
replace: {VARIABLE: `value`},
})
}
You may use any of these variables in the template by surrounding the variable name with %
characters.
public/index.html
<html>
<title>%VARIABLE%</title>
</html>