Ошибка компиляции при использовании функций es6, таких как const и let

Question

Я кодирую небольшое веб-приложение с пользовательским виртуальным домом.

Я немного боролся, но я установил стек с webpack 3 и babel 6, но я не могу использовать такие функции, как let, const и лямбды (es6), чтобы использовать функции javascript, которые используются при реализации приложения реакции с помощью create-react-app и javascript. Когда я пытаюсь использовать эти функции, компиляция терпит неудачу.

Мои конечные цели - обновить стек с помощью webpack 4 и babel 7, написать весь код и файл конфигурации с помощью es6; плюс в том, что стек можно легко изменить для поддержки es7 и выше, но сейчас меня интересует только es6.

класс, который не работает во время компиляции, выглядит так:

class Derived extends Base {
  
  const attr_one = " ";

  let attr_two = " ";
 
  const lambdas = () => console.log('');

  ....

}

my .babelr c

{
    "presets": [
        ["babel-preset-env", {
            "useBuiltIns": "usage",
            "corejs": "3",
            "targets": {
                "browsers": [
                    "> 1%",
                    "last 2 versions"
                ]
            }
        }],
        "stage-2",
        "react"
    ],
    "plugins": [[
        "syntax-dynamic-import"
        ], [
          "babel-plugin-transform-react-jsx",
          {
            "throwIfNamespace": false, 
            "runtime": "automatic", 
            "importSource": "custom-virtual-dom"
          }
        ]
    ]
}

конфигурация моего веб-пакета:

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: './src/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    { 
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true
                        }
                     },
                     { 
                         loader: 'postcss-loader',
                         options: {
                             ident: 'postcss',
                             plugins: () => [
                                 autoprefixer({
                                    overrideBrowserslist: [
                                        "> 1%",
                                        "last 2 versions"
                                     ]
                                 })
                             ]
                         }
                      }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=8000&name=images/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: __dirname + '/dist/index.html',
            inject: 'body'
        })
    ]
};

мой пакет. json:

  "name": "webapp",
  "version": "1.0.0",
  "description": "\"a testing webapp for my virtual dom\"",
  "main": "src/index.js",
  "scripts": {
    "test": "exit 1",
    "start": "webpack-dev-server",
    "build": " webpack --config webpack.config.js --progress --profile --color"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^3.0.0",
    "postcss-loader": "^2.0.7",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "custom-virtual-dom": "file:../custom-virtual-dom"
  }
}