该webpack-html-plugin插件会在生成的模板文件追加额外的标签元素，如渲染框架需要的挂载元素。
初始化:
npm install webpack-plugin-html-append-tag使用:
const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');
module.exports = {
// ...
plugins: [
new WebpackPluginHtmlAppendTag({
body: {
before: [{
tagName: 'div',
selfClosingTag: false,
voidTag: false,
attributes: {
id: 'app',
},
}],
},
}),
],
};将会生成的模板文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!-- ...webpack打包的资源文件 -->
<div id="app"></div>
<!-- ...其他内容 -->
</body>
</html>选项为一个对象，可以设置为：
{ [tagName: 'body' | 'head']: Tags}意为在html模板中body和head的标签中添加的标签内容。值类型Tags具体类型是：
typeof htmlWebpackPlugin.tags.headTags[0] | typeof htmlWebpackPlugin.tags.bodyTags[0] | typeof htmlWebpackPlugin.tags.headTags | typeof htmlWebpackPlugin.tags.bodyTags | { [hookName: 'before' | 'after']: typeof htmlWebpackPlugin.tags.headTags | typeof htmlWebpackPlugin.tags.bodyTags }可以配置为一个标签对象，标签数组或者指定追加位置的标签数组集。
标签对象为html-plugin-webpack提供在模板中使用的htmlWebpackPlugin对象中tags的headTags或bodyTags，如：
const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');
module.exports = {
// ...
plugins: [
new WebpackPluginHtmlAppendTag({
body: {
tagName: 'div',
selfClosingTag: false,
voidTag: false,
attributes: {
id: 'app',
},
},
head: {
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'favicon.ico' },
},
}),
],
};也可以配置为一个标签数组，如：
const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');
module.exports = {
// ...
plugins: [
new WebpackPluginHtmlAppendTag({
body: [{
tagName: 'div',
selfClosingTag: false,
voidTag: false,
attributes: {
id: 'app',
},
}, {
tagName: 'span',
selfClosingTag: false,
voidTag: false,
attributes: {
class: 'red',
},
}],
head: [{
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'favicon.ico' },
}, {
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'favicon2.ico' },
}],
}),
],
};还可以指定追加的位置，在webpack生成的一些标签之前还是之后，用于需要简单的顺序场景：
const WebpackPluginHtmlAppendTag = require('webpack-plugin-html-append-tag');
module.exports = {
// ...
plugins: [
new WebpackPluginHtmlAppendTag({
body: {
before: [{
tagName: 'div',
selfClosingTag: false,
voidTag: true,
attributes: { id: 'app', style: 'color: red;' },
}, {
tagName: 'div',
selfClosingTag: false,
voidTag: true,
attributes: { id: 'loading' },
}],
after: {
tagName: 'iframe',
selfClosingTag: false,
voidTag: true,
attributes: { src: 'http://path/to/advice' },
},
},
head: {
head: {
before: {
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'before.ico' },
},
after: [{
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'after1.ico' },
}, {
tagName: 'link',
selfClosingTag: false,
voidTag: true,
attributes: { rel: 'shortcut icon', href: 'after2.ico' },
}],
},
}),
],
};