WebPack 5赢得了Internet Explorer 11

Question

我正在尝试创建一个WebPack 5：Babel 7配置，该配置将其转移到IE11可以读取的ES5。这是一个使用vue.js的静态站点。

我已经成功地构建了它，但是它并没有做一些我认为文档意味着应该发生的事情。

我具体的问题是

我无法获得转型速度的工作。运行后，他们仍然是速记。

输出 - ＆GT;

sayHello() { ... }

而不是 - ＆gt;

sayHello : function() { ... }

docs 现在是@babel/preset-env 的一部分，因此我希望它可以开箱即用。

如果没有，我尝试安装插件包并在我的Babel Configs插件数组中列出，如上文中所示。但这也没有用。

没有转移到ES5的另一个ES6功能是

我使用browserslist配置文件的WebPack配置目标集。

我不确定我在哪里出错了，stackoverflow到处都是webpack 2、3和4的弃用建议或配置。

这是我的配置文件

.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.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

是否有人有任何想法，为什么这可能无法正如我期望的那样行不通？

更令人沮丧的是，当我将有问题的'Newsearch.js'文件复制并粘贴到默认值，即11 。