Dynamically change script tag in Ejs file using webpack

I am trying to change my src in the script tag inside my index.ejs file by using webpack. My initial goal is to change the src dynamically to '[name].[contentHash].js' each time I am running the command "npm run build" so it can use the right file in my index.ejs file. I tried using html-webpack-plugin but it didn't work.

This is my webpack.prod.js file:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].[contentHash].js',
        path:     path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[contentHash].css"
        }),
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",   
                    "sass-loader"   
                ]
            },
        ]
    }
}; 

This is my index.ejs file (the script at the bottom is the one I am trying to change):

<!DOCTYPE html>
<html lang="en">
    <head>
        <%- include('components/head', {title: title, process: process}) %>
    </head>
    <body>
        <% include components/navbar %>

        <section class="header">
          <div> balblabl </div>
        </section>
        <script type="text/javascript" src="../dist/index.bundle.js"></script>
    </body>
</html>