Webpack Babel script added to my index.html file needs to be src="/main.js" but is src="main.js". How can I configure this correctly?

Question

I am very new to babel and webpack and cant seem to figure this one out. I understand that babel loader or webpack inject this script to my output html file.

<script defer src="main.js"></script>

I need it to read

<script defer src="/main.js"></script>

.babelrc file:

{"presets": ["@babel/preset-env", "@babel/preset-react"]}

webpack.config.js:

   const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  },
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {loader: "babel-loader"}
      },
      {
      test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i, 
        loader: 'file-loader',
        options: {
          name: '/src/img/[name].[ext]'
        }
      }  
    ]
  }
};

I can keep making this change manually but would prefer to have webpack/babel output it correctly. I have spent a ton of time looking into it so far and have not been able to dig it up. Thanks in advance for any help.

EDIT I have changed my Entry to

entry: { 
    //path: path.join(__dirname, 'dist'),
    main: "/dist/main.js",
  },

And now my HTML reads

<script defer src="./dist/main.js"></script>

But everything works only if I remove the .

<script defer src="/dist/main.js"></script>

This is driving me nuts.

EDIT I am giving up on this - I think there has got to be an answer out there so I will watch out incase anyone has it...I have just written the script into my template html which currently gets the job done.

Answer 1

You need to set the publicPath

example:

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  publicPath: "/"
});