default webpack arrow functions IE11 issues

Question

I have a problem with webpack and IE11. I use Babel for transpiling and all functions and stuff are transpiled exept the webpackbootstrap functions. As seen in the image you can see an arrow function that's breaking IE11. I also created my own function and JS and that IS transpiled so only webpack's own js is not transpiled. Does anyone have seen the same problem? I have been searching the internet for 2 days now and tried many solutions but none of them fixed the issue.

As you can see in the images babel is transpiling correctly everything except for the default webpack javascripts.

I'm loosing my mind on this, please help me!

Thanks in advance.

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            // options...
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ["@babel/plugin-transform-arrow-functions"]
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "index.html")
        }),
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        })
    ]
};

package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "start-prod": "webpack serve --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.0",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-transform-arrow-functions": "^7.10.4",
    "@babel/preset-env": "^7.12.0",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.0.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

Example JS input

Example JS output

Answer 1

He i had a similar problem with webpack v5.

u can find my resolve of it here:

webpack + babel - transpile object arrow functions doesn't work