HTML Webpack Template

6.2.0 verified Sat Apr 25 auth: no javascript maintenance

html-webpack-template v6.2.0 is an EJS template for html-webpack-plugin that extends the default template with built-in options for app mount points, external scripts, meta tags, Google Analytics, and more. It requires html-webpack-plugin 2.x or 3.x (peer dependency) and was last released in 2016. It is in maintenance mode as the html-webpack-plugin ecosystem has evolved. Key differentiators: no need to write a custom index.html; supports appMountId, window, devServer, and other config options directly in the plugin configuration.

Common errors

error ERROR in Template execution failed: ReferenceError: htmlWebpackPlugin is not defined ↓

cause html-webpack-plugin version mismatch (v4+ changes variable names).

fix

Downgrade to html-webpack-plugin@3.x or use a compatible template.

error Module not found: Error: Can't resolve 'html-webpack-template' ↓

cause Missing npm install or incorrect path in template option.

fix

Run npm install html-webpack-template --save-dev and use require('html-webpack-template') instead of a string.

Warnings

breaking Package requires html-webpack-plugin v2.x or v3.x; does not work with v4+. ↓

fix Use html-webpack-plugin@3.x or migrate to a newer template like html-webpack-plugin's built-in or @dr.pogodin/react-helmet.

deprecated Package has not been updated since 2016; no support for html-webpack-plugin v4+ features. ↓

fix Consider using html-webpack-plugin's default template or alternatives like html-webpack-plugin/lib/loader.js.

gotcha Must set inject: false in HtmlWebpackPlugin options, otherwise assets are injected twice. ↓

fix Explicitly set inject: false in the constructor.

gotcha Options like appMountId, appMountIds, and window are case-sensitive; misspelling them results in silent failures. ↓

fix Double-check option names from documentation.

Install

npm install html-webpack-template

yarn add html-webpack-template

pnpm add html-webpack-template

Imports

default

wrong

import template from 'html-webpack-template';

correct

const template = require('html-webpack-template');

Package is CommonJS; ESM import may work in some bundlers but not guaranteed.

template string path
wrong
```
template: require.resolve('html-webpack-template')
```
correct
```
template: 'node_modules/html-webpack-template/index.ejs'
```
Using require() is the documented method; string path also works but is brittle.

HtmlWebpackPlugin configuration

wrong

new HtmlWebpackPlugin({ inject: true, template: 'html-webpack-template' })

correct

new HtmlWebpackPlugin({ inject: false, template: require('html-webpack-template') })

Must set inject: false because the template injects assets itself.

Quickstart

Shows basic usage with HtmlWebpackPlugin, required inject:false, and optional appMountId, window config, mobile meta, and lang attribute.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: HtmlWebpackTemplate,
      appMountId: 'app',
      window: {
        processEnv: {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV ?? 'development')
        }
      },
      mobile: true,
      lang: 'en-US'
    })
  ]
};