Webpack production version of website points to the wrong directories

I have two npm commands "build": "webpack --mode production" and "start": "webpack-dev-server --mode development --open". When I run the start command the web application runs as intended with all the CSS and javascript being transpiled correctly. However when I run build the fils are generated as intended and when the main HTML file is opened the href and src do not point to the correct directories.

I looked at my webpack.config.js and it appears to be working as intended which leads me to a bit of head-scratching. Changing the HTML template causes the development version to break and have the production version work as intended. The intention is for both development and production version to work as intended.

For reference here is my directory structure:

root
  |-.vscode
  |-dist
  |  |-css
  |  |-img
  |  |-js
  |    |- output location for bundle.js index.html main.css
  |-node.modules
  |-src
     |-css
     |  |-scss
     |-js
     |  |-JSON
     |  |-models
     |  |-view
     |  |-app.js
     |-index.html
     |-.babelrc
     |-package-lock.json
     |-package.json
     |-webpack.config.js

Webpack config file

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const babelLoader = require("babel-loader");

module.exports = {
    entry: [
        "babel-polyfill","./src/js/app.js"
    ],
    output: {
        path: path.resolve(__dirname, "dist/js"),
        filename: "bundle.js",
    },
    devServer: {
        contentBase: "./dist"
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html"
        })
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        modules: true,
                        localIdentName: "[local]"
                    }
                },
                    "sass-loader"
                ]
            }

        ]
    }
}

and package.json

{
  "name": "tempName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "Fake Name",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "chart.js": "^2.9.3",
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gulp-babel": "^8.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^7.3.1",
    "sortablejs": "^1.10.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "pokedex-promise-v2": "^3.2.0"
  }
}

How do I specify the href(s) and src(s) in the HTML document to link to the CSS and javascript since they are added during the build script and are not in the HTML template?