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

• 源代码名称: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模板 ) 实现的。 你也可以自己写。

旧版版本

对于使用 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

转载于:https://www.cnblogs.com/zhishaofei/p/9715336.html