1

We've got a fairly simple app/webpack setup which goes something like this:

babel.config.js

module.exports = {
  plugins: [...],
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'entry',
      corejs: '3'
    }]
  ]
}

index.js

import './polyfill';
import app from './app';
app();

polyfill.js

import 'core-js/stable';
import 'whatwg-fetch';

webpack.config.js

  entry: {
    bundle: [pathToIndexJs]
  }

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }

What we end up with is two chunks, bundle and vendors. The strange part is that whatwg-fetch (and core-js) does not end up in a chunk. When I create a build and output a stats.json file and analyze it using Webpack Analyze, I see the module in the list of modules (./node_modules/whatwg-fetch/fetch.js) but its chunks column is empty. I have verified that it is not ending up in either chunk/bundle by searching the bundle code.

This issue is fixed if I add the polyfill to the beginning of the entry.bundle array, but I am wondering why is it not being included in the bundle in the first place, since it is a normal app import? I would expect it to appear in the vendors bundle since it is a node_module.

papiro
  • 2,158
  • 1
  • 20
  • 29

1 Answers1

1

If you use core-js you don't have to add core-js anywhere. All you have to do is install core-js, create a .babelrc file and place the following in it

{
 "presets": [
  [
    "@babel/preset-env",
    {
      "debug": true,
      "useBuiltIns": "usage",
      "corejs": 3
    }
   ]
  ]
}

Dubug parameter shows exactly what polyffils are added and to what. Your code should look like this.

index.js 

import app from './app';
app();

Webpack stays as it is

UPDATE

I forgot one more thing and the most important thing for it you can't see pollyfils.

package.json

"browserslist": [
 "last 2 version",
 ">1%",
 "not dead"
],

Of course, you can adjust the list of browsers you want to get polyffils -> browserl

EDIT
What is the difference between "useBuiltIns": "usage" vs "useBuiltIns": "entry" Entry adds all polyfills and Usage only those that are needed for specific browsers.
Example file after compilation had 7KB after using Usage 47KB and after changing to Entry up to 114KB! The difference is huge.

Grzegorz T.
  • 3,903
  • 2
  • 11
  • 24
  • Hmm, I didn't realize it would affect my question, but we have a `babel.config.js` which includes the `preset-env` exactly as you have it shown (minus the debug option). – papiro Aug 22 '19 at 19:40
  • 1
    Remove it `import "core-js/stable"; import "whatwg-fetch";` Turn on debug But I forgot one more thing and the most important thing for it you can't see pollyfils. If you don't have it, you won't get poliffils In package.json add this entry `"browserslist": [ "last 2 version", "> 1%" "not dead"    ]` After this entry and launch in the console you will see the docs which is taken :) And all polyffils should be included in the code. I did update the answer – Grzegorz T. Aug 22 '19 at 19:46
  • Hmmm, I did as you suggested and realized that we were using `useBuiltIns: 'entry'`, which, [according to docs](https://babeljs.io/docs/en/babel-preset-env#usebuiltins) should replace our core-js import. Not sure why *that* wasn't happening. I changed it to "usage" per your answer and removed the core-js and whatwg-fetch line and everything was fine. Still though, `fetch` is undefined because core-js *doesn't* include a polyfill for it. But my question still remains. Why didn't Webpack include core-js and the fetch polyfill considering we imported them into index.js? – papiro Aug 22 '19 at 20:06
  • You are right my mistake core-js does not contain fetch polyfills. I checked in my project, I have, as I described, I do not import core-js and polyffils. Corejs does it for me. In the webpack analyzer I have core-js with all polyffils [webpack-boilerplate](https://github.com/tomik23/webpack-boilerplate) – Grzegorz T. Aug 22 '19 at 20:17