Webpack + Typescript + Babel producing ES6 syntax

Question

I'm trying to use Webpack and babel to create an ES5 compatible output of my typescript code. The resulting bundle.js file however still includes ES6 keywords such as let. How do I go about making the output truly ES5 compliant?

Below is my webpack config file:

const path = require('path');

module.exports = {
  mode: "production",
  entry: './src/intersight.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-typescript'],
                ['@babel/preset-env', {
                  targets: "defaults",
                  forceAllTransforms: true
                }]
              ],
            }
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    modules: [
      path.resolve('./node_modules')
    ],
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      stream: require.resolve('stream-browserify'),
      url: require.resolve('url'),
    }
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    globalObject: 'this'
  },
};

Answer 1

Look at this doc. If you remove in presets array "targets: default" it should target the oldest browsers per doc.