javascript - Creating separate chunk for core-js with webpack

Question

I'm using Webpack in combination with Babel to generate bundles compatible with older environments. For this I use babel-loader in Webpack 5. I'm using @babel/preset-env with the following config:

"@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "browsers": [
            "last 2 versions",
            "not ie < 11",
            "not ie_mob > 0"
          ]
        },
}

This works fine, only the needed core-js imports are being added to the bundles I'm generating. What I did notice, is that a lot of the core-js imports are the same in the different bundles I'm generating. Since on some pages I have multiple bundles being loaded, I'd like to pull out the core-js imports into a separate bundle, and load that in my HTML.

I adapted my webpack config like this:

optimization: {
    usedExports: true,
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/](core-js)[\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }

Now the result it that I'm getting a separate bundle containing the core-js imports from all my separate bundles, but there are a lot of duplicates in there (see 'web.url.js' for example). How could I configure this so these core-js modules are not duplicated in the vendor bundle?

question from:https://stackoverflow.com/questions/65951737/creating-separate-chunk-for-core-js-with-webpack

Answer 1

Waitting for answers