HTML Webpack Template

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 underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.

Legacy version

For the legacy version that works with [email protected], npm install html-webpack-plugin@2.

Installation

Install the template in your project with npm:

$ npm install html-webpack-template --save-dev

Basic Usage

There are a couple required parameters:

• inject: Set to false. Controls asset addition to the template. This template takes care of that.
• template: Specify this module's index.ejs file

And some other optional:

• appMountId: div element id on which you plan to mount a javascript app (can include multiple elements using the appMountIds array).
• devServer: Insert the webpack-dev-server hot reload script at this host:port/path (eg, http://localhost:3000).
• baseHref: Adjust the url for relative urls in the document (MDN).
• filename: The file to write the HTML to. Defaults to index.ejs. You can specify a subdirectory here too (eg: assets/admin.html).
• googleAnalytics.trackingId: Track usage of your site via Google Analytics.
• googleAnalytics.pageViewOnLoad: Log a pageview event after the analytics code loads.
• meta: Object that defines the meta tags.
• mobile: Sets appropriate meta tags for page scaling.
• scripts: Array of external script imports to include on page.
• title: The title to use for the generated HTML document.
• window: Object that defines data you need to bootstrap a javascript app.

Plus any html-webpack-plugin config options otherwise available.

Here's an example webpack config illustrating how to use these options in your webpack.config.js:

{
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // Required
      inject: false,
      template: require('html-webpack-template'),
      //template: 'node_modules/html-webpack-template/index.ejs',

      // Optional
      appMountId: 'app',
      baseHref: 'http://example.com/awesome',
      devServer: 3001,
      googleAnalytics: {
        trackingId: 'UA-XXXX-XX',
        pageViewOnLoad: true
      },
      meta: {
        description: "a better default template for html-webpack-plugin"
      },
      mobile: true,
      scripts: [
        'http://somecool.com/script.js'
      ],
      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
    })
  ]
}