Webpack 5 won't transpile to ES5 for Internet Explorer 11

Question

I'm trying to create a webpack 5 : babel 7 configuration that transpiles down to es5 that IE11 can read. It's a static site that uses vue.js.

I've got it building successfully, but it's not doing some things that I feel the docs imply should be happening.

The issues I have specifically are

I can't get transform-shorthand-properties to work. After it runs they are still shorthand.

outputs ->

sayHello() { ... }

instead of ->

sayHello : function() { ... }

The docs say that transform-shorthand-properties is part of @babel/preset-env now so I hoped it would work out of the box.

When it didn't, I tried installing the plugin package and listing it in my babel configs plugins array, as shown in the docs above. But that didn't work either.

Another es6 feature that isn't transpiling down to es5 is for...of

I've got my webpack config target set using a browserslist config file.

I'm not sure where I'm going wrong here, and stackoverflow is full of deprecated advice or configs for webpack 2, 3, and 4.

Here are my config files

.browserslistrc

# Browsers that we support

defaults
IE 11

package.json

"dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.18.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^4.6.0",
    "gyp": "^0.5.0",
    "jquery": "^3.6.0",
    "n": "^6.8.0",
    "node-gyp": "^6.1.0",
    "url-search-params-polyfill": "^8.1.1"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.12",
    "@babel/plugin-transform-runtime": "^7.18.0",
    "@babel/plugin-transform-shorthand-properties": "^7.16.7",
    "@babel/preset-env": "^7.17.12",
    "@babel/register": "^7.17.7",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "babel-preset-vue": "^2.0.2",
    "broken-link-checker": "^0.7.8",
    "bufferutil": "^4.0.6",
    "canvas": "^2.9.1",
    "core-js": "^3.22.5",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "cssnano": "^4.1.11",
    "expose-loader": "^4.0.0",
    "fs": "0.0.1-security",
    "jsdom": "^19.0.0",
    "link-check": "^5.1.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-linkchecker": "0.0.3",
    "popper.js": "^1.16.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "precss": "^4.0.0",
    "style-loader": "^3.3.1",
    "uglifyjs-folder": "^3.1.2",
    "utf-8-validate": "^5.0.5",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }

webpack.config.json

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
    entry: './webpack/entry.js',
    target: 'browserlist',
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "src/assets/javascript/"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            { 
                test: /\.js$/, 
                exclude: /node_modules/,
                use: { 
                    loader: 'babel-loader'
                }
            },
            { 
                test: /\.css$/, 
                use: [
                    'style-loader', 
                    MiniCssExtractPlugin.loader, 
                    { loader: 'css-loader', options: { importLoaders: 1 } }, 
                    { loader: 'postcss-loader', options: {
                        indent: 'postcss',
                        plugins: () => [ postcssPresetEnv() ]
                        }
                    }
                ]
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader',
                options: {
                    exposes: ['$', 'jQuery'],
                },
            },
            { 
                test: /\.vue$/, 
                use: { loader: 'vue-loader' }
            }
        ]
    },
    performance: {
        hints: false
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new VueLoaderPlugin()
    ]
};

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3,
        "targets": {
          "chrome": "58",
          "ie": "11"
        },
        "debug": true,
        "modules": "commonjs"
      },
      "vue"
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-shorthand-properties"
  ],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  },
  "ignore": ["node_modules"]
}

entry.js

import 'core-js/actual';
import "regenerator-runtime/runtime";
import 'bootstrap';
import 'jquery';

// some back to top button jquery stuff

Does anybody have any ideas why this might not be working as I'm expecting?

Even more frustratingly, when I copy and paste my problematic 'newsearch.js' file into the babel repl, I am able to see it transform all my shorthand functions and for...of loops without using any packages and setting the browserslist to defaults, ie 11.