Basic Configuration for React JS

babel.config.js

module.exports={
  presets:[
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins:[
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
}

package.json

{
  "name": "modulo02",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Lucas <lucas.raziel@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/runtime": "^7.9.2",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.9.0",
    "webpack-dev-server": "^3.10.3"
  },
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack-dev-server --mode production"
  }
}

webpack.config.js

const path = require('path')

module.exports={
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname,'public')
  },
  module: {
    rules:[
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use:[
          { loader: 'style-loader'},
          { loader: 'css-loader'}
        ]
      },
      {
        test: /.*\.(gif|jpe?g|png)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  }
}