text: const webpack = require('webpack');
  const path = require('path');
  const dotenv = require('dotenv');
  const HtmlWebPackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const ClassProperties = require('@babel/plugin-proposal-class-properties');
  
  const env = dotenv.config().parsed;
  const envKeys = Object.keys(env).reduce((prev, next) => {
      prev[`process.env.${next}`] = JSON.stringify(env[next]);
      return prev;
  }, {});
  
  const config = {
      devtool: 'source-map',
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'bundle.js',
          publicPath: '/',
      },
      devServer: {
          historyApiFallback: true,
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: 'babel-loader',
              },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: ['css-loader'],
                  }),
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      {
                          loader: 'file-loader',
                      },
                  ],
              },
          ],
      },
      plugins: [
          new webpack.DefinePlugin(envKeys),
          new HtmlWebPackPlugin({
              hash: true,
              filename: 'index.html', //target html
              template: './dist/index.html', //source html
          }),
          new ExtractTextPlugin({ filename: 'css/style.css' }),
      ],
  };
  
  module.exports = config;
  