webpack: whole project structure shown on localhost:8080 instead of component template

Question

(Pic is provided)So I have been following tutorial on webpack i followed instruction but when im hitting port 8080 im seeing this instead of component template, im using webpack-dev-server

This is webpack.config.js

var webpack = require("webpack");
var htmlwebpack = require('html-webpack-plugin');

//consfiguring object
module.exports = {
entry : "./src/main.ts",
output : {
    path : "./dist",
    filename : "app.bundle.js"

},

//out first module for ts
module : {
loaders : [
    {test : /\.ts$/, loader : 'ts'}
]
},

//what extension should be look for
resolve : {
extensions : ['', '.ts','.js']
},

Plugin :[
new htmlwebpack({
    template : './src/index.html'
})
]
}

Answer 1

The server look for the index.html that was in the dist folder thats why i displayed whole structure that found, quite logical, move index.html from dist(that was defualt with html-webpack-plugin) lost my 50 points :( for bounty