Question

这是我的webpack-config.js：

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的正确文件，但这就是全部。

问题出在哪里？

Answer 1

在您的html文件中，关闭脚本标记已损坏。

，/凭证＆GT;

Answer 2

您的文件名为App.jsx但您尝试从App.js

导入

与Webpack，ES6一起反应，不显示简单组件

2 个答案: