Custom variables in template are not resolved by HtmlWebpackPlugin

Question

I need to add random variables to my template. It's an ejected Angular project that uses HtmlWebpackPlugin . My HtmlWebpackPlugin configuration looks like this:

new HtmlWebpackPlugin({
  "filename": "./index.html",
  "hash": false,
  "inject": false,
  "compile": true,
  "favicon": false,
  "minify": false,
  "template": "./src/index.html",
  "cache": true,
  "showErrors": true,
  "chunks": "all",
  "excludeChunks": [],
  "myHash": Math.random().toString(36).slice(2),
  "xhtml": true,
  "chunksSortMode": function sort(left, right) {
    let leftIndex = entryPoints.indexOf(left.names[0]);
    let rightindex = entryPoints.indexOf(right.names[0]);
    if (leftIndex > rightindex) {
      return 1;
    }
    else if (leftIndex < rightindex) {
      return -1;
    }
    else {
      return 0;
    }
  }
})

myHash is the variable I need to add to template.

For some reason, this doesn't work:

<p><%= htmlWebpackPlugin.options.myHash %></p>

The generated Html looks like same: <p><%= htmlWebpackPlugin.options.myHash %></p>

Answer 1

When I had very similar (extrapolating <%=htmlWebpackPlugin.files.webpackManifest%> ) problem in webpack 1, I solved it by excluding html-file from html-loader:

{
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: minifyHtmlOpts
                }],
                // excluding, so ejs loader will be used for these pages
                exclude: /index.html/
            }

And it still works with webpack 3.