Html-webpack-plugin: Title not working.

Created on 18 Jan 2016 · 19Comments · Source: jantimon/html-webpack-plugin

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.

Source

F21

Most helpful comment

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 24 May 2017

👍8 🎉1

All 19 comments

I also have this problem.

wandergis on 18 Jan 2016

Do you use the html-loader?

jantimon on 18 Jan 2016

@jantimon I didn't use html-loader,now my config is:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
  entry: {
    main: ['./src/example.js']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      test: /\.png$/,
      loader: 'file-loader?name=images/[name].[ext]'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "TEST",
      template: 'underscore-template-loader!./src/template.html'
    }),
    new ExtractTextPlugin('styles.css')
  ]
};

wandergis on 18 Jan 2016

If I remove the html loader and build or use the webpack dev server, it doesn't even compile:

Hash: 9fcc69a03feb4ee3a665
Version: webpack 1.12.11
Time: 2335ms
                      Asset     Size  Chunks             Chunk Names
lib.9fcc69a03feb4ee3a665.js  3.58 kB       0  [emitted]  lib
app.e3691464d2341c58a066.js   805 kB    1, 0  [emitted]  app
                 index.html  3.32 kB          [emitted]
    + 216 hidden modules

ERROR in   Error: Child compilation failed:
  Module parse failed: C:\Work\test\ui\node_modules\html-webpack-plugin
  \lib\loader.js!C:\Work\test\ui\node_modules\html-webpack-plugin\defau
  lt_index.html Line 1: Unexpected token ILLEGAL
  You may need an appropriate loader to handle this file type.
  | var _ = require("C:\Work\test\ui\node_modules\lodash\index.js");mod
  ule.exports = function (obj) {
  | obj || (obj = {});
  | var __t, __p = '';:
  Error: Line 1: Unexpected token ILLEGAL

  - compiler.js:66
    [ui]/[html-webpack-plugin]/lib/compiler.js:66:16

  - Compiler.js:214 Compiler.<anonymous>
    [ui]/[webpack]/lib/Compiler.js:214:10

  - Compiler.js:403
    [ui]/[webpack]/lib/Compiler.js:403:12

  - Tapable.js:67 Compiler.next
    [ui]/[tapable]/lib/Tapable.js:67:11

  - CachePlugin.js:40 Compiler.<anonymous>
    [ui]/[webpack]/lib/CachePlugin.js:40:4

  - Tapable.js:69 Compiler.next
    [ui]/[tapable]/lib/Tapable.js:69:14

  - index.js:67 Compiler.<anonymous>
    [ui]/[html-webpack-plugin]/index.js:67:5

  - Tapable.js:71 Compiler.applyPluginsAsync
    [ui]/[tapable]/lib/Tapable.js:71:13

  - Compiler.js:400 Compiler.<anonymous>
    [ui]/[webpack]/lib/Compiler.js:400:9

  - Compilation.js:577 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:577:13

  - Tapable.js:60 Compilation.applyPluginsAsync
    [ui]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:572 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:572:10

  - Tapable.js:60 Compilation.applyPluginsAsync
    [ui]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:567 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:567:9

  - Tapable.js:60 Compilation.applyPluginsAsync
    [ui]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:563 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:563:8

  - Tapable.js:60 Compilation.applyPluginsAsync
    [ui]/[tapable]/lib/Tapable.js:60:69

  - Compilation.js:525 Compilation.seal
    [ui]/[webpack]/lib/Compilation.js:525:7

  - Compiler.js:397 Compiler.<anonymous>
    [ui]/[webpack]/lib/Compiler.js:397:15

  - Tapable.js:103
    [ui]/[tapable]/lib/Tapable.js:103:11

  - Compilation.js:445 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:445:10

  - Compilation.js:344 Compilation.errorAndCallback
    [ui]/[webpack]/lib/Compilation.js:344:3

  - Compilation.js:400 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:400:12

  - Compilation.js:123
    [ui]/[webpack]/lib/Compilation.js:123:4

  - Array.forEach

  - Compilation.js:122 callback
    [ui]/[webpack]/lib/Compilation.js:122:12

  - Compilation.js:137 Compilation.<anonymous>
    [ui]/[webpack]/lib/Compilation.js:137:11

  - NormalModule.js:113 DependenciesBlock.<anonymous>
    [ui]/[webpack]/lib/NormalModule.js:113:11

  - NormalModuleMixin.js:310 DependenciesBlock.onModuleBuild
    [ui]/[webpack-core]/lib/NormalModuleMixin.js:310:10

  - NormalModuleMixin.js:275 nextLoader
    [ui]/[webpack-core]/lib/NormalModuleMixin.js:275:25


Child html-webpack-plugin for "index.html":
        + 1 hidden modules

    ERROR in ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.html
    Module parse failed: C:\Work\test\ui\node_modules\html-webpack-plugin\lib\loader.js!C:\Work\test\ui\node_modules\html-webpack-plugin\default_index.html Line 1: Unexpected token ILLEGAL
    You may need an appropriate loader to handle this file type.
    | var _ = require("C:\Work\test\ui\node_modules\lodash\index.js");module.exports = function (obj) {
    | obj || (obj = {});
    | var __t, __p = '';

F21 on 18 Jan 2016

@F21 maybe you need this with 2.x

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

wandergis on 18 Jan 2016

👍3

I am actaully just using the default template:

new plugins.html({
            title: "test app"
        })

So, it compiles if I add the html loader:

{ test: /\.html$/, loader: 'html'}

However, the title still doesn't show up.

F21 on 18 Jan 2016

After changing from the html loader to underscore-template, it works. I guess the README just needs to be updated to include that information.

F21 on 18 Jan 2016

nice to help you!

wandergis on 18 Jan 2016

Will be fixed in 2.6.3

jantimon on 18 Jan 2016

can i npm install 2.6.3 now?

wandergis on 18 Jan 2016

@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 17 Mar 2016

👍6

So just to confirm, you actually have to use a templating system for the title to work (e.g. ejs, jade)? I'm just using a plain html file, so the title won't automatically be inject similar to the way the final bundle is injected into the page, I have to specifically inject it in the template manually?

akeemattelus on 26 Jul 2016

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

jantimon on 28 Jul 2016

👍2 😕1 😄1

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 24 May 2017

👍8 🎉1

And it works when I don't use html loader but I need it because I require some html files in my applications

Jokero on 24 May 2017

+1 I do too need the html loader to process the template first.

frdani on 19 Jun 2017

html-webpack-plugin (4.0.0) still doesn't work with html-loader (1.0.0-alpha.0)

<%= htmlWebpackPlugin.options.title %> result to
<%= htmlWebpackPlugin.options.title="" %=""></%=>

Barss07 on 18 May 2018

Kind of the same here. It does not work with *.html, but with underscore-template-loader!filename.html it renders something like module.export="FILECONTENT" as output.
But in the second case <%= require('html-loader!./partial.html') %> works.

It became quite tricky task to use html partials in template.html.

Vermond125 on 5 Jun 2018

The original issue is over 1 year old.
If there is a bug or something we can improve for the html-webpack-plugin please open a new issue with a link to this one.

jantimon on 5 Jun 2018

Was this page helpful?

0 / 5 - 0 ratings