How to Tell Webpack to Use html-webpack-plugin’s Generated Filename for href Attributes inside a React Component?

I’m using html-webpack-plugin to generate my HTML files; which uses contenthash to name the files.

const htmlWebpackPluginConfig = new HtmlWebpackPlugin({
  chunks: ['product'],
  filename: 'pages/product/product.[contenthash].html',
  template: './pages/product/index.html'

In my react component I’m rendering some links which will point to the HTML file mentioned above. and as the HTML will be in a different directory with different name when bundled by the plugin, I don’t know how to reference it in the href attribute so that webpack changes it to the generated HTML file.

<a href="../pages/product/index.html"></a>

If it’s a src attribute for images or etc, I just import the image and webpack will take care of it. but I don’t know how that will work with a HTML file which is generated by a plugin.

Of course I could change it manually after building, but I’m looking for a more efficient way.

Source: Ask Javascript Questions