html-webpack-template, 一个更好的html web service插件

Posted 2021-01-09 zhishaofei3

• 源代码名称:html-webpack-template
• 源代码网址:http://www.github.com/jaketrent/html-webpack-template
• html-webpack-template源代码文档

html-webpack-template源代码下载

• Git URL:
  复制代码

  git://www.github.com/jaketrent/html-webpack-template.git

• Git Clone代码到本地:
  复制代码

  git clone http://www.github.com/jaketrent/html-webpack-template

• Subversion代码到本地:
  复制代码

  $ svn co --depth empty http://www.github.com/jaketrent/html-webpack-template
  Checked out revision 1.
  $ cd repo
  $ svn up trunk

 

HTML web pack模板

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

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

旧版版本

对于使用 [email protected]的旧版本，npm install [email protected] 。

安装

使用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 })
 ]
}