LocalHost8080エラーページ

次のスクリプトを実行すると、npm run devのlocalhost出力が現在のファイル構造になります。代わりにWelcomeコンポーネントをレンダリングする必要があります。私はここでは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 devのファイルです：「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を出力 localhost:8080