html-webpack-plugin: Title not working.

I am using 2.6.2.

The plugin is instantiated using webpack-load-plugins:

var plugins = require('webpack-load-plugins')();
var webpack = require('webpack');

module.exports = {
    ....
    devtool: 'inline-source-map',

    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,

        // Display only errors to reduce the amount of output.
        stats: 'errors-only',

        // Parse host and port from env so this is easy to customize.
        host: process.env.HOST,
        port: process.env.PORT
    },

    plugins: [
        new plugins.html({
            title: "test app"
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}

I am using webpack-dev-server as my webserver.

This is the output:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  <script src="lib.3660029166e2b80a54fa.js"></script><script src="app.fbee4ebb5e598dc6a9b1.js"></script></body>
</html>

Notice that the title is not replaced correctly.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19 (4 by maintainers)

Commits related to this issue

Explicit documentation about sub-templating Maybe I should split this PR into 2 commits, you will tell me * there was one comma `;` in the example that made my build crash. * judging by the hard ... — committed to JSteunou/html-webpack-plugin by JSteunou 8 years ago

Most upvoted comments

The same problem. Version of plugin is 2.28.0. I have html template and html-loader is defined in webpack config, but title is not set:

module: {
    rules: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        ...
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        template: 'index.html'
    }),
    ...
]

Template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title>
</head>
<body>
</body>
</html>

Result:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title>
<link href="app.css" rel="stylesheet"><link href="vendor.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>

How to make it work?

Jokero on May 24, 2017

@wandergis change your template ext index.html => index.ejs

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.template.ejs',
    title: globalConfig.pageConfig.title,
    favicon: 'src/images/favicon.ico',
    inject: true,
  })

stoneChen on Mar 17, 2016

@nateislate correct - write the title direct into your html file or use a template language of your choice

jantimon on Jul 28, 2016

@F21 maybe you need this with 2.x

new HtmlWebpackPlugin({
      template: 'underscore-template-loader!./src/template.html'
    })

wandergis on Jan 18, 2016