Я создал свою первую конфигурацию webpack-babel и первый компонент реакт но при запуске вебпак-сервера возникает ошибка
Файл конфигурации вебпака
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader'},
{test: /\.ts$/, exclude: /node_modules/, use: ['babel-loader', 'ts-loader']}
]
},
output: {
path: path.resolve(__dirname,'build'),
filename: "index.js"
},
devServer:{
overlay:true
},
plugins: [
new HtmlWebpackPlugin(),
],
mode: "development"
}
файл index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
Файл index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <div><p>Hello world</p></div>;
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
При выполнении команды webpack-dev-server --mode development --open --hot
компиляция проходит нормально и выполняется успешно но в результате вывода в браузере выдаёт ошибку
