During the build process, Builder will compile based on the HTML template and template parameters to generate several HTML files.
Builder provides some configs to set the HTML template. Through this chapter, you can learn the basic usage of these configs.
HTML templates are usually predefined by the upper framework.
For example, in the Modern.js framework, the HTML template is preset by default, and users can also customize the content of the template. You can read the "Modern.js - HTML Template" chapter to learn about it.
In Builder, you can use html.template and html.templateByEntries configs to define the path to the custom HTML template.
You can set the HTML <title>
tag through the html.title and html.titleByEntries configs.
When there is only one page in your project, just use the html.title
setting directly:
When there are multiple pages in your project, please use html.titleByEntries
to set corresponding titles for different pages. html.titleByEntries
uses the page's "entry name" as the key.
Builder supports setting favicon icon and apple-touch-icon icon.
You can set the favicon through the html.favicon and html.faviconByEntries configs.
You can also set the apple-touch-icon for iOS system through the html.appIcon config.
You can set the meta tags through the html.meta and html.metaByEntries configs.
For example to setting description:
The generated meta tag in HTML is:
In HTML templates, you can use a variety of template parameters. The template parameters injected by Builder by default include:
You can also use the html.templateParameters and html.templateParametersByEntries configs to pass in custom template parameters.
For example:
Then you can read parameters in the HTML template with <%= text %>
:
The generated HTML code is as follows:
Builder supports using Lodash Template, EJS, Pug as template engines, the most basic Lodash Template is used as the default template engine.
When the suffix of the template is .html
, Builder will use Lodash Template to compile it.
For example, if you define a text
parameter in a template with a value of 'world'
, Builder will automatically replace <%= text %>
with the value.
Please read the Lodash Template documentation for details.
When the suffix of the template is .ejs
, Builder will use the EJS template engine to compile it. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
For example, you can first refer to a .ejs
template through the html.template config:
Then define a user
parameter in the template with a value of { name: 'Jack' }
. Builder will automatically replace <%= user.name %>
with the value.
Please read the EJS documentation for details.
When the suffix of the template is .pug
, Builder will use the Pug template engine to compile it. Pug is a robust, elegant, feature rich template engine for Node.js.
Before using the Pug template, you need to enable the tools.pug config, and define the html.template config to reference a .pug
template:
Then you can use Pug syntax in .pug
templates:
Please read the Pug documentation for details.
The html.tags
option can be configured to insert any tags into the final generated HTML product.
The artifacts of the web application will eventually be referenced directly or indirectly by HTML entries, but most of the time injecting tags directly into HTML is not preferred.
All tags that need to be injected into HTML can be accessed in the template file via the variable htmlWebpackPlugin.tags
.
The purpose of html.tags
is to adjust these template variables and thus modify the HTML, as defined in API References.
The final insertion position of the tag is determined by the head
and append
options, and two elements with the same configuration will be inserted into the same area and hold their relative positions to each other.
The publicPath
configuration is enabled by default for tags, the value of output.assetPrefix
will be stitched to the src
property of the script
tag that represents the path.
So the HTML output built with the above configuration will look like this.
html.tags
also accepts a callback function, which is often used to modify the list of tags or to ensure their relative position while inserting them.
And you will get: