• 源代碼名稱: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

這是一個用於 web pack插件插件的模板() 。 它擁有比默認模板更多的特性，希望在 web pack項目中創建自己的文件可能不太可能。

html-webpack-plugin的模板是使用下劃線模板 ( 以前，在 2. x, blueimp模板 ) 實現的。 你也可以自己寫。

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

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