webpack - Babel 不使用 NPM / Webpack 填充？

Question

我真的是 Webpack + Babel 的新手，想在我的项目中尝试一下，但是当我运行“npm run build”来运行我包含的 webpack.production.config.js 文件时，它没有似乎在我的脚本中为 IE11 创建了必要的 polyfill。

我在下面包含了我试图填充的 JS 文件之一，我的 package.JSON、.babelrc 和 webpack.production.config.js：

** 包.JSON **

{
  "name": "nutrifast",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js"
  },
  "author": "Jonas Schmedtmann",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.0.7",
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

** webpack.production.config.js **

const path = require('path'); 

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.min.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: ''
    },
    mode: 'production',
    module: {
        rules: [ 
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ '@babel/preset-env' ]
                    }
                }
            }
        ]
    }
}

** .babelrc **

{ 
    "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry"
          }
        ]
    ]
}

** ./src/main.js **

// Header Menu 
{
    const menuTrgr = document.querySelector("a[data-menu-toggle]");         
            
    const menuToggle = function() {
        menuTrgr.classList.contains("active") ? menuTrgr.classList.remove("active"): menuTrgr.classList.add("active");
    };
            
    menuTrgr.addEventListener("click", menuToggle);
}

// Populates Basket from local
if(reset_basket !== 1) {
    (function() {
        if(localStorage) {          
            // Populates the meals and totals       
            const totals = JSON.parse(localStorage.getItem("totals"));  
            if(totals) {
                const basketTotal = totals.mealAmount > 0 ? totals.mealAmount : 0;      
                document.getElementById("basket-total").innerHTML = `<b>Meals</b> <i>${basketTotal}</i>`;
            }       
        }
    })();
}

如果有人能指出我正确的方向，将不胜感激。

标签： webpackbabeljsbabel-polyfill