I am using webpack to generate the bundle for frontend/UI code. I am using react as a frontend library. I understand that webpack uses loaders to process different content it encounters in the source. If it has a loader for something it will know what to do with it. In this case the babel-loader and @babel/preset-react are being used @babel-preset/env to tell webpack what do do with new es features and the JSX. Now here is my problem:

Since I am using electron it already has many of the great features like arrow functions, spread operator, async/await and much more and even though webpack is provided the target electron-renderer it still does not know that it doesnt need to commpile these things to equivalent code that does not need compiling in the given environemnt.

How do I avoid this unnecessary transpilation. For reference here is my webpack config.

const path = require('path');

module.exports = {
  entry: './renderer/index.js',
  target: 'electron-renderer',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'renderer'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  devtool : false,
  resolve: {
    extensions: ['.js'],
  },
};