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. iOS开发基础-九宫格坐标(1)

    一.功能分析 1)以九宫格展示图片信息,每一个 UIView 包含一个 UIImageView .一个 UILabel 和一个 UIButton . 2)加载App数据,根据数据长度创建对应的格子数: ...

  2. 基于 HTML5 的 3D 工业互联网展示方案

    前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...

  3. Windows 支持 OpenSSH 了!

    从 Win10 1809 和 Windows Server 2019 开始 Windows 开始支持 OpenSSH Server.本文介绍一下其基本的概念和配置方法,本文演示用的环境为 Win10 ...

  4. Python中的垃圾回收与del语句

    python中的垃圾回收采用计数算法 一个对象如果被引用N次,则需要N次(即计算引用次数为零时)执行del 才能回收此对象. a = 100 b = a del a print(b) print(a) ...

  5. [Alpha阶段]第一次Scrum Meeting

    Scrum Meeting博客目录 [Alpha阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/04/01 大运村寝室6楼 40min ...

  6. iview 动态渲染menu时active-name无效的问题

    动态渲染menu时,如果需要active-name,那么name只能绑定index,动态渲染的数组初始必须有一个空对象.否则无法使用active-name属性.注:仅限3.0版本,不排除新版本修复的可 ...

  7. 安装Java和Tomcat

    安装Java 下载java源码包 安装的是JDK8,下载地址如下:下载链接 注意,不要在服务器中使用wget来下载jdk,因为oracle会认为你是爬虫,下载的文件不是jdk,而是一个html文件. ...

  8. mybatis mapper映射文件全解

    目录 select.update.delete.insert 设置参数类型以及取值 基本数据类型 对象数据类型 map数据类型 #{  } 和 ${  } 的区别 ResultMap Auto-map ...

  9. ABP新增模块可能遇到的问题

    当我们新增一个模块时: public class SSORedisModule: AbpModule { //public override void PreInitialize() //{ // b ...

  10. Python——匿名函数

    一.定义: 是指一类无需定义标识符(函数名)的函数或子程序 二.语法格式: lambda 参数:表达式 三.注意事项: lambda 函数可以接收任意多个参数 (包括可选参数) 并且返回单个表达式的值 ...