CODEWITHSUNDEEP
webpack
brendangibson
brendangibson

Reputation: 2543

How do I replace variables with HtmlWebpackPlugin and Webpack?

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?

Upvotes: 1

Views: 1370

Answers (1)

brendangibson
brendangibson

Reputation: 2543

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

I should have written

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

Upvotes: 1

Related Questions