angular - webpack: コンポーネント テンプレートの代わりに localhost:8080 に表示されるプロジェクト全体の構造

Question

（写真が提供されています）だから私はwebpackのチュートリアルに従ってきましたが、指示に従いましたが、ポート8080にアクセスすると、コンポーネントテンプレートの代わりにこれが表示され、webpack-dev-serverを使用しています

これは 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'
})
]
}