Where to located javascript in webpack

Questions
1

Hello guys, I am new to webpack. I have installed and configured webpack and babel plus other plugins for understanding it and I have done a simple code just for testing. It is a javascript code that asks for a value in a variable using prompt and it should print in the explorer but nothing is shown and I get some errors in the console.
(Uncaught ReferenceError: nombre is not defined)

The structure of the webpack is:

two folders (src and dist)
in the src I have the file template.html
then, I have two js files, the index.js and another from I read functions.

in the dist I have the bundle.js and index.html

I also have the webpack.config.js and the package.json

in the index.js this is my code:

var nombre;
 nombre = prompt("Intro nom");

in the HTML template file:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <script src="dist/bundle.js"></script>

   

</head>

<body>

  <script src="dist/bundle.js"></script>

 

  <div id="contenedor">

   

    <p>Nombre:<script>document.write(nombre);</script> </p>

  </div>

  <script src="dist/bundle.js"></script>

  </body>

I think the issue may be the place where I located the line but does not matter where I have located it, I get a similar issue
Could you address me with this issue?

Regards