LocalHost8080錯誤頁面

當我運行以下腳本npm run dev localhost輸出是當前文件結構。相反，我需要它來呈現歡迎組件。我試圖找出根本原因，無論是webpack.config.js，工程建築等，這裏是我webpack.config.js文件LocalHost8080錯誤頁面

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPLugin = require("extract-text-webpack-plugin"); 

module.exports = { 
context: path.join(__dirname, "src"), 
entry: "./main.js", 
module: { 
loaders: [ 
    { 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
     presets: ['react', 'es2015'] 
    } 
    }, 
    { 
    test: /\.scss$/, 
    use: ExtractTextPLugin.extract({ 
     fallback: 'style-loader', 
     use:['css-loader', 'sass-loader'], 
     publicPath: './dist' 
    }) 
    } 
] 
}, 
output: { 
path: path.resolve(__dirname, "./dist"), 
filename: "[name].bundle.js", 
}, 
devServer: { 
    contentBase: path.join(__dirname, "./dist"), 
    hot: true, 
    inline: true, 
}, 
plugins:[ 
    new webpack.HotModuleReplacementPlugin() 
] 
};

的package.json開發「的WebPack-DEV-服務器--inline --content基DIST/--hot」

項目架構

Main.js

import React from "react"; 
import ReactDOM from "react-dom"; 



import Welcome from "./components/Welcome"; 

const app = document.getElementById('app'); 

ReactDOM.render(<Welcome/>, app);

Welcome.js

import React from "react"; 

export default class Welcome extends React.Component { 
render() { 
return (
    <div> 
    <h4>Welcome Component</h4> 
    </div> 
); 
} 
}

main.html中

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React App</title> 
    </head> 

    <body> 
    <div id="app"></div> 
    <script src="main.bundle.js"></script> 
    </body> 
</html>

本地主機輸出 localhost:8080