Babel not compiling vendors chuck

I migrated to Webpack 4 and set up everything according to the Docs, however, my vendors.js chunk is not getting compiled like the main.js chunk.

I have placed the vendors into the optimization.splitChunks.cacheGroups object, as the docs suggested, but didnt find a way to make these "cacheGroups" get compiled with babel.

My problem is that one of the libraries has a ES6 class and now IE11 isnt working due to this fact.

My webpack optimization object looks like:

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /.css$/,
          chunks: 'all',
          enforce: true
        },
        vendor: {
          name: 'vendor',
          test: /[\/]node_modules[\/]/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }

Is there a way to force webpack to compile vendors with babel as well?

Regards

Answer

you should have posted the entire webpack config to give people more context.

Anyways, optimization step has very little to do with the actual transpiling. Your vendor chunk is set to only include stuff from node_modules which is almost never processed (unless you specifically tell babel-loader to include a certain package).

Since I do not know how you configured your babel-loader I would suggest something along these lines:

{
    test: /.js$/,
    exclude: (file) => {
        return /node_modules/.test(file) && !file.includes("/node_modules/my-es6-module/");
    }
}

The idea is to exclude all files containing node_modules unless the file path contains the name of your specific module which you do need to process with babel.

In general, having an ES6 code published to npm is a very bad practice and should be avoided at all costs.

If this is not enough, please do update your question with your webpack config to give us more insight into your setup.