Why does it seem the whole core-js library is being bundled with my webpack setup?

Question

I am using Webpack with Babel, and @babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)

My package.js:

    {
      "name": "holidaynewtheme",
      "version": "0.1",
      "description": "Starter theme for holidaynewbase",
      "private": true,
      "main": "webpack.config.js",
      "dependencies": {
        "core-js": "^3.6.5",
        "element-closest": "^3.0.2",
        "flickity": "^2.2.1",
        "gsap": "^3.4.2",
        "js-cookie": "^2.2.1",
        "turbolinks": "^5.2.0",
        "vanilla-lazyload": "^17.1.0",
        "whatwg-fetch": "^3.4.0"
      },
      "devDependencies": {
        "@babel/core": "^7.11.0",
        "@babel/plugin-transform-runtime": "^7.8.3",
        "@babel/preset-env": "^7.8.4",
        "@babel/runtime": "^7.8.4",
        "@shopify/theme-cart": "^3.0.3",
        "@shopify/theme-product": "^3.0.3",
        "@shopify/theme-product-form": "^3.0.3",
        "@shopify/themekit": "^1.1.3",
        "autoprefixer": "^9.7.4",
        "babel-loader": "^8.0.6",
        "bluebird": "^3.5.3",
        "copy-webpack-plugin": "^5.1.1",
        "cross-env": "^7.0.2",
        "css-loader": "^3.4.2",
        "eslint": "^6.8.0",
        "file-loader": "^3.0.1",
        "glob": "^7.1.6",
        "html-includes": "^4.3.3",
        "mini-css-extract-plugin": "^0.9.0",
        "modernizr": "^3.6.0",
        "modernizr-loader": "^1.0.1",
        "node-sass": "^4.13.1",
        "postcss-loader": "^3.0.0",
        "pre-commit": "^1.2.2",
        "sass-loader": "^8.0.2",
        "svg-symbols": "^1.0.5",
        "url-loader": "^1.1.2",
        "webpack": "^4.41.6",
        "webpack-bundle-analyzer": "^3.8.0",
        "webpack-cli": "^3.3.11",
        "webpack-shell-plugin-next": "^1.1.5"
      },
      "browserslist": [
        "last 1 version",
        "> 2%",
        "Explorer >= 11"
      ]
    }

My babel.config.json:

            {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            useBuiltIns: "entry",
                            debug: true,
                            corejs: "3.6.4"
                        }
                    ]
                ],
                "plugins": [
                    "@babel/plugin-transform-runtime"
                ]
            }

I have the following imports set up in my main entry point:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:

When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.

When I remove the import line, nothing is imported either.

Answer 1

OK, feeling foolish.

My webpack.config.js had this configuration for babel-loader:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: ['@babel/env'],
    }
  }, 

... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.

Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.

The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.