My index.html file can not find the bundle.js file

I'm using the html-webpack-plugin plugins to automatically generate my index.html

This is the structure of the project

App/
|__webpack
   |__ webpack-config.js
|__public
|__src
   |__main.js
   |__template.html

and this is my webpack configuration

const path = require('path')
let webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    hash: true,
    title: 'App',
    template: './src/template.html', })

const config = {
    entry: [path.resolve(__dirname, '../src/main.js')],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public'),
        publicPath: '/public/',
    },
    .
    .
    .
    plugins: [HtmlWebpackPluginConfig] 
}

when running webpack, it generates the index.html in the public directory / but when linking with the script (bundle.js) that is in the same folder, it adds this code

<script type="text/javascript" src="/public/bundle.js?020cd52cffe8c35aacc0"></script></body> 

There is some way to change it to

<script type="text/javascript" src="bundle.js?020cd52cffe8c35aacc0"></script></body>

without having to do it by hand I mean that when I run webpack once I add the correct path.