How do I replace variables with HtmlWebpackPlugin and Webpack?

Question

I am trying to replace a title and a version number in my HTML. I cannit get the variables to be replaced. The final output still includes the variable names.

My webpack config contains:

const HtmlWebpackPluginConfig = {
  template: path.join(__dirname, '/client/index.html'),
  inject: 'body',
  commitHash: 'hello',
  filename: '/index.html',
  title: 'My App'
};

and my index.html is:

<!DOCTYPE html>
<html>
  <head>
    <title>{%= htmlWebpackPlugin.options.title %}</title>
    <meta charset="UTF-8"/>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.json">
    <meta name="version" content="{%= htmlWebpackPlugin.options.commitHash %}">

  </head>
  <body>
    <div id="react-view" ></div>
  </body>
</html>

The final output is pretty much the same as the index.html file (with the react element filled in).

What am I doing wrong? How do I get the variables to be replaced?

brendangibson · Accepted Answer · 2016-12-12 18:57:31Z

1

The problem was that I was using curly brackets instead of angle brackets.

I should have written

<title><%= htmlWebpackPlugin.options.title %></title>

answered Dec 12, 2016 at 18:57

brendangibson

2,5514 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

weaveoftheride Over a year ago

are you using some kind of templating engine there?

Collectives™ on Stack Overflow

How do I replace variables with HtmlWebpackPlugin and Webpack?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related