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',
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 })
]
}

html-webpack-template, 一个更好的html web service插件的更多相关文章

  1. 构建一个基于 Spring 的 RESTful Web Service

    本文详细介绍了基于Spring创建一个“hello world” RESTful web service工程的步骤. 目标 构建一个service,接收如下HTTP GET请求: http://loc ...

  2. Apache CXF实现Web Service(2)——不借助重量级Web容器和Spring实现一个纯的JAX-RS(RESTful) web service

    实现目标 http://localhost:9000/rs/roomservice 为入口, http://localhost:9000/rs/roomservice/room为房间列表, http: ...

  3. (转)Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  4. Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  5. 【Java学习笔记】如何写一个简单的Web Service

    本Guide利用Eclipse以及Ant建立一个简单的Web Service,以演示Web Service的基本开发过程: 1.系统条件: Eclipse Java EE IDE for Web De ...

  6. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  7. 现代前端库开发指南系列(二):使用 webpack 构建一个库

    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...

  8. webpack 之 一个简单的基本生产环境配置

    webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...

  9. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

随机推荐

  1. 在区块链上表白——使用C#将一句话放入比特币的区块链上

    最近在看区块链和比特币的知识,顺便简单研究了一下BitCoin的脚本语言,发现OP_RETURN这个命令可以在后面放入自己想说的内容,很多侧链啊,公证之类就是利用了这个特性,可以把一句话,或者一个哈希 ...

  2. Linux内存管理 (4)分配物理页面

    专题:Linux内存管理专题 关键词:分配掩码.伙伴系统.水位(watermark).空闲伙伴块合并. 我们知道Linux内存管理是以页为单位进行的,对内存的管理是通过伙伴系统进行. 从Linux内存 ...

  3. 自己编写 EntityTypeConfiguration

    1.新建类库 EFCore.EntityTypeConfig ,安装nuget  PM> Install-Package Microsoft.EntityFrameworkCore 2.新建接口 ...

  4. 爬虫之BS&Xpath

    BeautifulSoup 一 简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: ''' Beautiful Soup提供一些简单的.p ...

  5. java基础-开发工具IDEA

    常用快捷键 查找 查找:Ctrl + F Find In Path: Ctrl + F + Shift (比普通查找多了一个shift) Search EveryWhere : 双击Shift 视图 ...

  6. 播放器更改语言归属地后Cnario player软件无法启动的问题

    打开系统运行,输入regedit,进入注册表编辑器. 找到HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\C-nario\Player下面culture 的值,删除即可 ...

  7. 通过JS获取URL链接带的参数

    1 /** 2 * 获取URL参数的方法 3 */ 4 $.extend({ //以便于通过$引用该方法 5 getUrlVars : function() { //获取多个参数数组 6 var va ...

  8. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  9. bis和bic命令实现或和异或运算

    从20世纪70年代末到80年代末,Digital Equipment的VAX计算机是一种非常流行的机型.它没有布尔运算AND和OR指令,只有bis(位设置)和bic(位清除)这两种指令.两种指令的输入 ...

  10. XUGUO-书呆子-搜索书箱

    WorldCat 上的 米塔斯 通过图书馆馆藏的全球目录WorldCat,在附近的图书馆中查找所要的资料. < 用 Sketch 创作 Airiti Library華藝線上圖書館 BookBub ...