Webpack-dev-server showing directory list instead of the app page

Question

I am building a progressive web app using react and i am using a webpack dev server.

My Web app config :

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080',
        'webpack/hot/only-dev-server',
        './src/index.jsx'
    ],
    output: {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js',
         publicPath: 'http://localhost:8080'
    },
    devServer: {
        contentBase: "./public",
        hot: true
    },
    resolve: {
        modulesDirectories: ['node_modules','src'],
        extensions: ['','.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot','babel?presets[]=react,presets[]=react,presets[]=es2015']
            }

        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

This is my directory structure :

Please help me with this as i am not able to see my index.html. Is there something wrong with my config file

Answer 1

Your index.html is in the folder "src" so your webpack.config.js should like this:

devServer: {
    contentBase: "./src",
    hot: true
},