This is a template for the webpack plugin html-webpack-plugin. It has a few extra features than the default template which will hopefully make it less likely that you'll have to create your own index.html
file in your webpack project.
Templates for the html-webpack-plugin are implemented using blueimp templates. You can write your own as well.
Install the template in your project with npm:
$ npm install html-webpack-template --save-dev
Once installed, you can reference the template in your webpack.config.js
using the template
option, passing the path to this module's index.html
file.
Additional configuration options are as follows:
filename
: The file to write the HTML to. Defaults toindex.html
. You can specify a subdirectory here too (eg:assets/admin.html
).mobile
: Sets appropriate meta tags for page scaling.googleAnalytics.trackingId
: Track usage of your site via Google Analytics.googleAnalytics.pageViewOnLoad
: Log apageview
event after the analytics code loads.title
: The title to use for the generated HTML document.devServer
: insert the webpack-dev-server hot reload script at this host:port/path (eg, http://localhost:3000)appMountId
: div element id on which you plan to mount a javascript appwindow
: object that defines data you need to bootstrap a javascript app
Here's an example webpack config illustrating how to use these options in your webpack.config.js
:
{
// ...
plugins: [
new HtmlWebpackPlugin({
template: 'node_modules/html-webpack-template/index.html',
title: 'My App',
filename: 'assets/admin.html',
mobile: true,
googleAnalytics: {
trackingId: 'UA-XXXX-XX',
pageViewOnLoad: true
},
devServer: 3000,
appMountId: 'app',
window: {
env: {
apiHost: 'http://myapi.com/api/v1'
}
}
})
]
}