这是一个用于 web pack插件插件的模板() 。 它拥有比默认模板更多的特性，希望在 web pack项目中创建自己的文件可能不太可能。

html-webpack-plugin的模板是使用下划线模板 ( 以前，在 2. x, blueimp模板 ) 实现的。 你也可以自己写。

旧版版本

对于使用 html-webpack-plugin@1.x的旧版本，npm install html-webpack-plugin@2 。

安装

使用npm在你的项目中安装模板：

$ npm install html-webpack-template --save-dev

基本用法

要使它的工作，你需要提供这些需要参数:

• inject: false
• template: require('html-webpack-template')

你可以提供一些其他的可选参数:

• appMountId: 你计划安装JavaScript应用程序的<div> 元素 id 。
• appMountHtmlSnippet: 将插入appMountId的<div> 元素中插入的一小段 HTML 。
• appMountIds: 应用程序元素id的array 。
• baseHref: 调整文档( MDN ) 中 relative 网址的URL 。
• devServer: 在这里主机上插入webpack-dev-server热插拔脚本：端口/路径；比如，http://localhost:3000 。
• googleAnalytics.trackingId: 通过 Google Analytics 跟踪你的站点使用情况。
• googleAnalytics.pageViewOnLoad: 在分析代码加载后记录 pageview 事件。
• lang: 标识你的内容语言的字符串
• links: <link> 元素的array 。
  • 如果 array 元素是字符串，则值被分配给 href 属性，rel 属性设置为 "stylesheet" ；
  • 如果 array 元素是对象，则将对象和值的属性分别用作属性名和值。
• meta: 包含要作为元标记包含的key-value 对的对象的array 。
• mobile: 为页面缩放设置适当的元标记。
• inlineManifestWebpackName: 用于与 inline-manifest-webpack-plugin组件一起使用。
• scripts: 外部脚本导入的array，以包含在页面上。
  • 如果 array 元素是字符串，则值被分配给 src 属性，type 属性设置为 "text/javascript" ；
  • 如果 array 元素是对象，则将对象和值的属性分别用作属性名和值。
• window: 定义你需要 Bootstrap 应用程序的数据的对象。
• headHtmlSnippet: 将插入到head元素中的一小段 HTML 。
• bodyHtmlSnippet: 将插入到正文元素中的一小段 HTML 。

加上任何 html-webpack-plugin配置选项，否则可用。

示例

下面是 web pack配置演示如何在你的webpack.config.js 中使用这些选项的示例：

{

 //.. . plugins: [

 newHtmlWebpackPlugin({

 // Required inject:false,

 template:require('html-webpack-template'),

 // template: 'node_modules/html-webpack-template/index.ejs',// Optional appMountId:'app',

 appMountHtmlSnippet:'<div class="app-spinner"><i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i></div>',

 headHtmlSnippet:'<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style> ',

 bodyHtmlSnippet:'<custom-element></custom-element>',

 baseHref:'http://example.com/awesome',

 devServer:'http://localhost:3001',

 googleAnalytics: {

 trackingId:'UA-XXXX-XX',

 pageViewOnLoad:true },

 meta: [

 {

 name:'description',

 content:'A better default template for html-webpack-plugin.' }

 ],

 mobile:true,

 lang:'en-US',

 links: [

 'https://fonts.googleapis.com/css?family=Roboto',

 {

 href:'/apple-touch-icon.png',

 rel:'apple-touch-icon',

 sizes:'180x180' },

 {

 href:'/favicon-32x32.png',

 rel:'icon',

 sizes:'32x32',

 type:'image/png' }

 ],

 inlineManifestWebpackName:'webpackManifest',

 scripts: [

 'http://example.com/somescript.js',

 {

 src:'/myModule.js',

 type:'module' }

 ],

 title:'My App',

 window: {

 env: {

 apiHost:'http://myapi.com/api/v1' }

 }

 // And any other config options from html-webpack-plugin:// https://github.com/ampedandwired/html-webpack-plugin#configuration })

 ]

}