why babel is not converted es6 to es5 using webpack?

Question

I am trying to convert my es6 syntax ( import and export keyword, arrow function) files in es5 using babel in moduler bundler webpack. I am able to do that but in bundle I saw few arrow function why? is babel not able to compile those?

I do like this

webpackconfig.js

 module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

package.json

"devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.15",
    "autoprefixer": "^10.2.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "compression-webpack-plugin": "^7.1.2",

but I got bundle which started from arrow function . bundle.js

 (() => {
        "use strict";
        var t, e, a, n, u = (t = function () {
        enter code here
          ({
            init: function () {
                this.initComponents()
            }, initComponents: function () {
                Ut.init(), Pt.init()
            }
        }).init()
    })();

Answer 1

The arrow function you have seen is generated by webpack which is not from babel at all. Basically webpack allows you configure to fully support es5 syntax by setting up target .

Here's an example:

// webpack.config.js
module.exports = {
   // ...
  target: ['web', 'es5'],
}

Alternatively, if you wish to use browserslist , you can simply set as browserslist and provide the configuration via package.json

// webpack.config.js
module.exports = {
   // ...
  target: ['browserslist'],
}

And specify the configuration:

// package.json
{
  // ...
  "browserslist": [
    "IE 11"
  ]
}