- Notifications
You must be signed in to change notification settings - Fork98
a better default template for html-webpack-plugin
License
jaketrent/html-webpack-template
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Note - Support for this template is lagging Webpack. This currently only supports (old!) webpack v3. I'mlooking for contributors who would like to give it some loving upgrades.
This is a template for thewebpack pluginhtml-webpack-plugin.It has a few extra features more than thedefault templatewhich will hopefully make it less likely that you'll have to create your ownindex.html
file in your webpack project.
Templates for the html-webpack-plugin are implemented usingunderscore templates(previously, in 2.x,blueimp templates). You can write your own aswell.
For the legacy version that works withhtml-webpack-plugin@1.x
,npm install html-webpack-plugin@2
.
Install the template in your project with npm:
$ npm install html-webpack-template --save-dev
To make it work, you need to provide theserequired parameters:
inject: false
template: require('html-webpack-template')
And you can provide some otheroptional parameters:
appMountId
: The<div>
element id on which you plan to mount a JavaScript app.appMountHtmlSnippet
: A small snippet of HTML that will be inserted in the<div>
element the appMountId is attached to.appMountIds
: An array of application element ids.baseHref
: Adjust the URL for relative URLs in the document (MDN).devServer
: Insert the webpack-dev-server hot reload script at this host:port/path; e.g.,http://localhost:3000.googleAnalytics.trackingId
: Track usage of your site viaGoogle Analytics.googleAnalytics.pageViewOnLoad
: Log apageview
event after the analytics code loads.lang
: String identifying your content languagelinks
: Array of<link>
elements.- If an array element is a string, the value is assigned to the
href
attribute and therel
attribute is set to"stylesheet"
; - If an array element is an object, the object's properties and values are used as the attribute names and values,respectively.
- If an array element is a string, the value is assigned to the
meta
: Array of objects containing key value pairs to be included as meta tags.mobile
: Sets appropriate meta tag for page scaling.inlineManifestWebpackName
: For use withinline-manifest-webpack-plugin.scripts
: Array of external script imports to include on page.- If an array element is a string, the value is assigned to the
src
attribute and thetype
attribute is set to"text/javascript"
; - If an array element is an object, the object's properties and values are used as the attribute names and values,respectively.
- If an array element is a string, the value is assigned to the
window
: Object that defines data you need to bootstrap a JavaScript app.headHtmlSnippet
: A small snippet of HTML that will be inserted in the head element.bodyHtmlSnippet
: A small snippet of HTML that will be inserted in the body element.
Plus anyhtml-webpack-plugin config optionsotherwise available.
Here's an example webpack config illustrating how to use these options in yourwebpack.config.js
:
{// ...plugins:[newHtmlWebpackPlugin({// Requiredinject:false,template:require('html-webpack-template'),// template: 'node_modules/html-webpack-template/index.ejs',// OptionalappMountId:'app',appMountHtmlSnippet:'<div><i 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})]}
About
a better default template for html-webpack-plugin
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.