html-webpack-plugin: How to inject parameters like title into the template

Question

I am trying to pass title to html-webpack-plugin but it does not create title tag at all :(

Can somebody show me where is the problem

webpack.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    entry: ['./src/app/main.ts'],
    output: {
        filename: 'build.js',
        path: 'dist'
    },
    resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js', '.json']
    },
    resolveLoader: {
        modulesDirectories: ["node_modules"]
    },
    devtool: "source-map",
    plugins: [
        new HtmlWebpackPlugin({
            title : 'Hello',
            template: './src/index.html',
            inject: 'body',
            hash: true,
        })
    ],
    module: {
        loaders: loaders
    }
};

And here is index.html

<!doctype html>
<html lang="en">
<head>
    <noscript>
        <meta http-equiv="refresh" content="0; url=https://en.wikipedia.org/wiki/JavaScript">
    </noscript>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <ui-view></ui-view>
</body>
</html>

When I start webpack server title is not injected?

Samar Panda · Answer 1 · 2020-06-02T00:49:54.140

11

Try this <title><%= htmlWebpackPlugin.options.title %></title> in your html file. For reference you can check index.html file in my repos webpack-setup.

edited Jun 02 '20 at 00:49

answered Jun 11 '17 at 01:09

Samar Panda

4,186
3
25
32

2

Can you explain how this works? There must be some kind of templating engine running somewhere at build time to process this. – Andy Dec 19 '19 at 11:44
@Andy It is basically the feature of webpack which internally uses tapable hooks. And all the plugins developed around webpack also leverages those hooks. Especially for html-webpack-plugin you can refer these events flow: https://github.com/jantimon/html-webpack-plugin#events – Samar Panda Dec 23 '19 at 10:35

score 3 · Answer 2 · answered Apr 27 '17 at 12:08

3

This issue has been reported here Title not working. #176

If you want to add the dynamic <title> tag, you should use a template language like ejs, jade, ...

answered Apr 27 '17 at 12:08

iarroyo

2,354
24
23

score 0 · Answer 3 · answered Jan 08 '20 at 16:44

In Webpack insert this configuration

{
    test: /\.(index.html)$/,
    use: [
      {loader: "file-loader"},
      { loader: "extract-loader" },
      {
      loader: 'html-loader',
      options: {
        attrs: [':data-src']
      }
    }]
  }

Insure this configuration:

new HtmlWebpackPlugin({
  title: "My Page TItle",
  template: './index.html'
}),

score 0 · Answer 4 · answered Feb 03 '23 at 14:49

0

You can now use templateParameters like so:

new HtmlWebpackPlugin({
  template: 'index.html',
  templateParameters: {
    title: 'My web app',
  },

and in your index.html file header:

    <title><%= title %></title>

answered Feb 03 '23 at 14:49

Tylor

309
4
9

score -3 · Answer 5 · answered Jun 20 '19 at 04:06

Have you tried inject the title tag in template html file ./src/index.html?

<!doctype html>
<html lang="en">
<head>
    <noscript>
        <meta http-equiv="refresh" content="0; url=https://en.wikipedia.org/wiki/JavaScript">
    </noscript>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <ui-view></ui-view>
</body>
</html>

html-webpack-plugin: How to inject parameters like title into the template

5 Answers5