用的WebPack，ES6，简单的成分反应不显示

这是我webpack-config.js：用的WebPack，ES6，简单的成分反应不显示

module.exports = { 
     entry: "./src/js/main.js", 
     output: { 
      path: './dist', 
      filename: 'bundle.js', 
      publicPath: './dist' 
     }, 
     devServer:{ 
      inline: true, 
     contentBase: './dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader:'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
}

我创建简单的组件App.js：

import React from 'react'; 

export default class App extends React.Component{ 
    render(){ 
     return <h1>Hello</h1> 
    } 
}

和我main.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './components/App.js'; 

render(<App/>, document.getElementById('main'));

我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
</head> 
<body> 
    <div id="main"></div> 
    <script src="bundle.js">,/scrip> 
</body> 
</html>

当我运行webpack-dev-server时，没有错误，它是服务器右侧的文件夹，但是我看到空的页面，在WEB控制台没有错误。我看到它加载正确的文件，编号为main，但多数民众赞成在所有。

问题在哪里？

来源

2016-11-25 gdfgdfg

你有一个'index.html'？ –

是的，就像我写的'我看到它加载正确的文件与id主' – gdfgdfg

你有没有链接你的bundle.js与'

您的文件被命名为App.jsx，但是你想从App.js

来源

2016-11-26 00:18:35 danidee

'App.js'，sry类型错误。已更改。 – gdfgdfg

用的WebPack，ES6，简单的成分反应不显示

相关问题