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