ОЧЕНЬ ПРОШУ, возникла ошибка — index.html:1 GET 127.0.0.1:5500/src/index.html 404 (Not Found) кто знает как решить?

Видел решения на разных форумах, но все равно не понимаю, что нужно делать, объясните пожалуйста.
Начал делать небольшой проект, возникла ошибка, сейчас постараюсь все расписать.
HTML:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title</title>
 </head>
 <body>
   
  <script type="module" src="app.js" ></script>
 </body>
</html>

Вот моя структура файлов:

Основной файл app.js, модули apiConfig.js, apiservice.js и locations.js.
app.js:

import locations from './store/locations'; 
locations.Init().then(res => console.log(res));

apiConfig.js:

const config = {
    url: 'https://aviasales-api.herokuapp.com',
};
export default config;

apiService.js :

import axios from 'axios'; 
import config from '../config/apiConfig';
class Api {
    constructor(config) {
        this.url = config.url ;
    }
    async countries() {
        try {
            const response = await axios.get(`${this.url}/countries`)
            console.log(response);
        } catch (err) {
            console.log(err); 
            return Promise.reject(err); 
        }
    }
    async cities() {
        try {
            const response = await axios.get(`${this.url}/cities`)
            console.log(response);
        } catch (err) {
            console.log(err); 
            return Promise.reject(err); 
        }
    }
    async prices(params) {
    }
}
const api = new Api(config); 
export default api;

locations.js:

import api from '../service/apiService'; 
class Locations {
    constructor(api) {
        this.api = api;
        this.countries = countries; 
        this.cities = cities; 
    }
    async Init() {
        const response = await Promise.all([
            this.api.countries(), 
            this.api.cities()
        ])
        const [counties, cities] = response; 
        this.countries = counties; 
        this.cities = cities; 

        return response; 
    }
    getCitiesByCountryCode(code) {
        return this.cities.filter(city => city.county_code === code);
    }
}
const locations = new Locations(api);  
export default locations;

Вот webpack:

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

module.exports = {
  entry: {
    polyfill: 'babel-polyfill',
    app: './app.js',
  },
  context: path.resolve(__dirname, 'src'),
  devServer: {
    publicPath: '/',
    port: 5500,
    contentBase: path.join(process.cwd(), 'dist'),
    host: '127.0.0.1',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    hot: true,
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
        test: /\.js$/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',

            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [precss, autoprefixer],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  mode: 'development',
};

В итоге возникает такая ошибка: