Javascript babel loader无法识别React应用程序中的ES6代码

我正在尝试使用react应用程序设置网页包。在我的例子中，我没有使用CreateReact应用程序，所以我尝试自己设置东西。我看到了这个错误：

这是：

这是我的webpack.config.js：

module.exports = {
    mode: 'development',
    context: __dirname,
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }, 
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /(node_modules)/, 
                use: {
                    loader: 'babel-loader', 
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]

    }
}

这是我用于我的组件的代码：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

    state = {
        posts: []
    }


    componentDidMount = () => {
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

    }

    render() {
        return (
            <div>this is home</div>    
        )
    }
}

export default App

---

我仍然是新的网页和加载程序，所以任何帮助是感激的

babel etc需要成为package.json中的依赖项。尝试将babel polyfill添加到您的开发依赖项中。

将代码更改为

componentDidMount(){
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

}

---

尝试使用。

但我也希望对其他函数使用=>语法。另外，另一个state={}语法不起作用，我刚刚注意到你的package.json将babel等定义为依赖项，但这些是devdependency。。。依赖项打包在客户端使用，而devdependency仅在生成捆绑包的传输过程中使用Hanks Christopher：

componentDidMount(){
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

}