webpack.config.js

const path = require('path')
// const Dotenv = require('dotenv-webpack')
import * as Dotenv from 'dotenv'

Dotenv.config()

module.exports = {
  mode: 'development',

  plugins: [new Dotenv()],
  entry: path.join(__dirname, 'src', 'index'),
  watch: true,
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js',
    chunkFilename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
        query: {
          presets: [
            [
              '@babel/env',
              {
                targets: {
                  browsers: 'last 2 chrome versions',
                },
              },
            ],
          ],
        },
      },
    ],
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx'],
    fallback: {
      fs: false,
    },
  },
  devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, '/dist/'),
    inline: true,
    host: 'localhost',
    port: 8080,
  },
}