Babel-loader: Babelrc ignores Browserlist config if Babel polyfill is loaded within Webpack entry, but not if simply included in source

[kroko]

I'm submitting a bug report

I guess that this is babel-loader (webpack) thing, as it is related with webpack _entry_, but I might be wrong (and this should be addressed to babel polyfill directly) (?)

Webpack Version:
3.10.0

Babel Core Version:
7.0.0-beta.38

Babel Loader Version:
8.0.0-beta.0

Please tell us about your environment:
OSX 10.13.2

Current behavior:

Consider following:

_package.json_

{
    "@babel/core": "^7.0.0-beta.38",
    "@babel/polyfill": "^7.0.0-beta.38",
    "@babel/preset-env": "^7.0.0-beta.38",
    "babel-loader": "^8.0.0-beta.0"
}

_.babelrc_

{
  "presets": [
    [
      "@babel/preset-env",
        {
        "useBuiltIns": "entry",
        "forceAllTransforms": true,
        "ignoreBrowserslistConfig": false,
        "modules": false,
        "debug": false
      }
    ]
  ]
}

.browserlistrc

last 1 Chrome version

Javascript code _site.js_ has polyfill in the beginning

import '@babel/polyfill';
// code here

Webpack is built and the output bundle has size _KSIZE_.

Now change .browserlistrc

> 0.0001%

this changes output bundle has size _LSIZE_.

_LSIZE_ ⋙ _KSIZE_, obviously :)

Now let us put polyfill import, where it belongs - in webpack config entry

_webpack.front.config.js_

  entry: {
    site: [
      '@babel/polyfill',
      path.join(__dirname, 'src/site.js')
    ],
    // ...
  },

and remove it from site.js.

Build by having .browserlistrc last 1 Chrome version bundle size _MSIZE_ is obtained.
Build by having .browserlistrc > 0.0001% bundle size _NSIZE_ is obtained.

Observation:

_MSIZE_ == _NSIZE_ && _MSIZE_ ⋙ _LSIZE_ ⚠️

Summary

• _KSIZE_ is bundle size when polyfills included in site.js and last 1 Chrome version is asked
• _LSIZE_ is bundle size when polyfills included in site.js and > 0.0001% is asked
• _MSIZE_ is bundle size when polyfills included in entry and last 1 Chrome version is asked
• _NSIZE_ is bundle size when polyfills included in entry and > 0.0001% is asked

Same thing applies if i remove _.browserslistrc_ file and give target.browsers key in _.babelrc_

{
  "presets": [
    [
      "@babel/preset-env",
        {
        "targets": {
          "browsers": ["last 1 Chrome version"]
        },
        "useBuiltIns": "entry",
        "forceAllTransforms": true,
        "ignoreBrowserslistConfig": false,
        "modules": false,
        "debug": true
      }
    ]
  ]
}

and flip between last 1 Chrome version and > 0.0001%. Once polyfill is included in site.js, changing targeted browsers in _.babelrc_ changes bundle size. Once polyfill is specified in webpack entry, changing targets.browsers value in _.babelrc_ does nothing, the bundle is always huge.

Expected/desired behavior:

_MSIZE_ should equal _KSIZE_ (last 1 Chrome version), it does not, thus unexpected
_NSIZE_ should equal _LSIZE_ (> 0.0001%), it does not, thus unexpected
_MSIZE_ cannot be equal to _NSIZE_ (last 1 Chrome version vs > 0.0001% asked), they are equal, thus unexpected

In other words,

• putting polyfill in webpack entry array should yield same results as if it is put into site.js
• changing targeted browsers in _.browserslistrc_ (or even _.babelrc_) should affect bundle size (bundle size here is just used as a simple measure)

It seems that whenever polyfill is included in webpack entry simply all possible polyfills are included, browserlist targeted browsers are ignored, as both _MSIZE_ and _NSIZE_ are equal and much greater than _LSIZE_.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

I created a repo here.
https://github.com/kroko/babelloadertest

Build logs are as follows

polyfill in entry & last 1 Chrome version, observe import '@babel/polyfill' was not found

 10% building modules 2/4 modules 2 active ..._modules/@babel/polyfill/lib/index.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "63"
}

Using modules transform: false

Using plugins:
  check-constants {}
  transform-arrow-functions {}
  transform-block-scoped-functions {}
  transform-block-scoping {}
  transform-classes {}
  transform-computed-properties {}
  transform-destructuring {}
  transform-duplicate-keys {}
  transform-for-of {}
  transform-function-name {}
  transform-literals {}
  transform-object-super {}
  transform-parameters {}
  transform-shorthand-properties {}
  transform-spread {}
  transform-sticky-regex {}
  transform-template-literals {}
  transform-typeof-symbol {}
  transform-unicode-regex {}
  transform-new-target {}
  transform-regenerator {}
  transform-exponentiation-operator {}
  transform-async-to-generator {}
  transform-dotall-regex {}

Using polyfills with `entry` option:

[/path/to/babelloadertest/src/site.js] `import '@babel/polyfill'` was not found.
 10% building modules 4/5 modules 1 active .../valet/babelloadertest/src/helpers.js
[/path/to/babelloadertest/src/helpers.js] `import '@babel/polyfill'` was not found.
 49% building modules 328/329 modules 1 active .../babelloadertest/src/site.global.scssNode#moveTo was deprecated. Use Container#append.

polyfill in entry & > 0.0001%, observe import '@babel/polyfill' was not found

10% building modules 2/3 modules 1 active ...IVE/valet/babelloadertest/src/site.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "4.1",
  "chrome": "4",
  "edge": "12",
  "firefox": "2",
  "ie": "5.5",
  "ios": "3.2",
  "safari": "3.2"
}

Using modules transform: false

Using plugins:
  check-constants { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-arrow-functions { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-block-scoped-functions { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-block-scoping { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-classes { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-computed-properties { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-destructuring { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-duplicate-keys { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-for-of { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-function-name { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-literals { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-object-super { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-parameters { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-shorthand-properties { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-spread { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-sticky-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-template-literals { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-typeof-symbol { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-unicode-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-new-target { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-regenerator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-exponentiation-operator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-async-to-generator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-dotall-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }

Using polyfills with `entry` option:

[/path/to/babelloadertest/src/site.js] `import '@babel/polyfill'` was not found.
 10% building modules 4/5 modules 1 active .../valet/babelloadertest/src/helpers.js
[/path/to/babelloadertest/src/helpers.js] `import '@babel/polyfill'` was not found.
 49% building modules 328/329 modules 1 active .../babelloadertest/src/site.global.scssNode#moveTo was deprecated. Use Container#append.

polyfill in site.js & last 1 Chrome version, observe Replaced @babel/polyfill with the following polyfills

 10% building modules 2/3 modules 1 active ...IVE/valet/babelloadertest/src/site.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "63"
}

Using modules transform: false

Using plugins:
  check-constants {}
  transform-arrow-functions {}
  transform-block-scoped-functions {}
  transform-block-scoping {}
  transform-classes {}
  transform-computed-properties {}
  transform-destructuring {}
  transform-duplicate-keys {}
  transform-for-of {}
  transform-function-name {}
  transform-literals {}
  transform-object-super {}
  transform-parameters {}
  transform-shorthand-properties {}
  transform-spread {}
  transform-sticky-regex {}
  transform-template-literals {}
  transform-typeof-symbol {}
  transform-unicode-regex {}
  transform-new-target {}
  transform-regenerator {}
  transform-exponentiation-operator {}
  transform-async-to-generator {}
  transform-dotall-regex {}

Using polyfills with `entry` option:

[/path/to/babelloadertest/src/site.js] Replaced `@babel/polyfill` with the following polyfills:
  web.timers { "chrome":"63" }
  web.immediate { "chrome":"63" }
  web.dom.iterable { "chrome":"63" }
 10% building modules 3/4 modules 1 active .../valet/babelloadertest/src/helpers.js
[/path/to/babelloadertest/src/helpers.js] `import '@babel/polyfill'` was not found.
 16% building modules 56/57 modules 1 active .../babelloadertest/src/site.global.scssNode#moveTo was deprecated. Use Container#append.

polyfill in site.js & > 0.0001%, observe Replaced @babel/polyfill with the following polyfills

 10% building modules 2/3 modules 1 active ...IVE/valet/babelloadertest/src/site.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "4.1",
  "chrome": "4",
  "edge": "12",
  "firefox": "2",
  "ie": "5.5",
  "ios": "3.2",
  "safari": "3.2"
}

Using modules transform: false

Using plugins:
  check-constants { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-arrow-functions { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-block-scoped-functions { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-block-scoping { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-classes { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-computed-properties { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-destructuring { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-duplicate-keys { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-for-of { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-function-name { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-literals { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-object-super { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-parameters { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-shorthand-properties { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-spread { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-sticky-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-template-literals { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-typeof-symbol { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-unicode-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-new-target { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-regenerator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-exponentiation-operator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-async-to-generator { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  transform-dotall-regex { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }

Using polyfills with `entry` option:

[/path/to/babelloadertest/src/site.js] Replaced `@babel/polyfill` with the following polyfills:
  es6.typed.array-buffer { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.data-view { "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.int8-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.uint8-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.uint8-clamped-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.int16-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.uint16-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.int32-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.uint32-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.float32-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.typed.float64-array { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.map { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.set { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.weak-map { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.weak-set { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.apply { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.construct { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.define-property { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.delete-property { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.get { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.get-own-property-descriptor { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.get-prototype-of { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.has { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.is-extensible { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.own-keys { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.prevent-extensions { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.set { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.reflect.set-prototype-of { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.promise { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.symbol { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.freeze { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.seal { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.prevent-extensions { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.is-frozen { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.is-sealed { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.is-extensible { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.get-own-property-descriptor { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.get-prototype-of { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.keys { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.get-own-property-names { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.assign { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.is { "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.object.set-prototype-of { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.function.name { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.raw { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.from-code-point { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.code-point-at { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.repeat { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.starts-with { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.ends-with { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.string.includes { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.regexp.flags { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.regexp.match { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.regexp.replace { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.regexp.split { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.regexp.search { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.from { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.of { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.copy-within { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.find { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.find-index { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.fill { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.array.iterator { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.is-finite { "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.is-integer { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.is-safe-integer { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.is-nan { "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.epsilon { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.min-safe-integer { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.max-safe-integer { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.parse-float { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.number.parse-int { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.acosh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.asinh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.atanh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.cbrt { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.clz32 { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.cosh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.expm1 { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.fround { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.hypot { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.imul { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.log1p { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.log10 { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.log2 { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.sign { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.sinh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.tanh { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es6.math.trunc { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.array.includes { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.object.values { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.object.entries { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.object.get-own-property-descriptors { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.string.pad-start { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  es7.string.pad-end { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  web.timers { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  web.immediate { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
  web.dom.iterable { "android":"4.1", "chrome":"4", "edge":"12", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
 22% building modules 102/146 modules 44 active .../node_modules/core-js/modules/_wks.js
[/path/to/babelloadertest/src/helpers.js] `import '@babel/polyfill'` was not found.
 35% building modules 213/214 modules 1 active .../babelloadertest/src/site.global.scssNode#moveTo was deprecated. Use Container#append.

• What is the expected behavior?

See above.

When @babel/polyfill is included in entry array building process finds it and replaces @babel/polyfill with _sub polyfills_ that are specified in browserslist. See logs for "polyfill in site.js & last 1 Chrome version".

Currently it does not _find_ @babel/polyfill, but as it is in entry array ALL polyfills are included ALWAYS (see logs).

• What is the motivation / use case for changing the behavior?

Avoiding hoisting surprises, if users follow actual documentation and do not check/trust "it just works" then they end up with all polyfill collection in a huge bundle...

Btw, IMHO I can reproduce same behaviour with replacing mono-repo with

npm install babel-loader babel-core babel-preset-env babel-polyfill

{
"babel-core": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-loader": "^7.1.2"
}

so anyone who specifies babel polifill in webpack entry array could test this in their own projects by changing targeted browsers (wherever it is specified, in my case it is _.browserslistrc_ file, it is also used by PostCSS autoprefixer) from existing to last 1 Chrome version and > 0.0001% and observe if bundle size changes.

[kroko]

It seems that the solution is

either

1)

• Have "useBuiltIns": "entry",
• Import @babel/polyfill in source, not entry (against documentation!)
• @babel/polyfill has to be installed obviously
• Have targeted browsers specified wherever (babelrc, .browserlistrc, package.json, etc)

or

2)

• Have "useBuiltIns": "usage",
• Not to import @babel/polyfill anywhere - neither in entry point nor source (against documentation!)
• @babel/polyfill has to be installed obviously
• Have targeted browsers specified wherever (babelrc, .browserlistrc, package.json, etc)

---

As discussed in original ticket 1st case works.

---

For the 2nd case > 0.0001% will result in

Using polyfills with `usage` option:

[/path/to/babelloadertest/src/site.js] Added following polyfill:
  es6.array.find { "android":"4.1", "chrome":"4", "firefox":"2", "ie":"5.5", "ios":"3.2", "safari":"3.2" }
 10% building modules 3/4 modules 1 active .../valet/babelloadertest/src/helpers.js
[/path/to/babelloadertest/src/helpers.js] Based on your code and targets, none were added.

and last 1 Chrome version

Using polyfills with `usage` option:

[/Users/reinis/Documents/warpcloud/WARP/CODE-WEB-LIVE/valet/babelloadertest/src/site.js] Based on your code and targets, none were added.
 10% building modules 4/5 modules 1 active .../valet/babelloadertest/src/helpers.js
[/Users/reinis/Documents/warpcloud/WARP/CODE-WEB-LIVE/valet/babelloadertest/src/helpers.js] Based on your code and targets, none were added.

which is expected behaviour, hooray.

Just note, that in the 2nd case @babel/polyfill should not be included anywhere. If it is included in entry as in documentation then all polyfills will be included as well as one found by usage (thus effectively es6.array.find is included twice).

[kroko]

Reference https://github.com/babel/babel/issues/7254

[loganfsmyth]

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.

I'll second the statement above. If you're using entry you need to have the import in your own code.