Precompiling JSX/JavaScript with babel server side then excluding babel from webpack bundle in production build. Is it possible ? How?

Question

I'm building a react application and using webpack to bundle assets. I'm also splitting all node_module bundle so that file size will not be bloated.

The goal is to reduce network request and to reduce the bundle size so I think it would be Ideal to pre-transform jsx and js code to commonjs module with babel in server side so babel will no longer need to be sent to browser

This is my optimization.splitChunks code so far in webpack configuration file. I'm new to webpack and babel pleasepardon if something is not explained clearly.

splitChunks: {
  name: 'components',
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name(module) {
        const name = module.context.match(/node_modules[\\/](.*?)([\\/]|$)/)[1];
        return `${name.replace('@', '')}`;
      },
      filename: 'vendor/[name].js',
    },
    template: {
      test: /[\\/]template[\\/]/,
      name: 'template',
    },
  },
},

Then this the result that I got when viewing chrome devtool elements tab

// rendered in DOM document.body 

<script async="" data-chunk="main" src="/static/js/runtime.a5cbbe54.js"></script>
<script async="" data-chunk="main" src="/static/js/main.4107eaec.js"></script>
<script async="" data-chunk="Home" src="/vendor/react-icons.js"></script>
<script async="" data-chunk="Home" src="/static/js/template.7880c2a3.js"></script>

// Is there a way to exclude babel here ? while preserving the functionality of react components ?

<script async="" data-chunk="Home" src="/vendor/babel.js"></script>   
<script async="" data-chunk="Home" src="/static/js/components.1dba9c56.js"></script>
<script async="" data-chunk="Home" src="/static/js/Home.503ffd56.js"></script>