本文是我的个人经验总结，如有疏漏，希望你留言指正，感谢～

一、.babelrc文件 + webpack配置

1. 新建.babelrc文件，内容如下：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

2. 设置webpack文件

module.exports = {
  module: {
    //模块
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: [
          {
            //用 babel-loader 把es6转es5
            loader: 'babel-loader'
          },
        ],
        exclude: /node_modules/
      },
    ]
  }
}

二、纯 webpack配置方案1

module.exports = {
  module: {
    //模块
    rules: [
      //规则，多个loader
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                require.resolve('@babel/preset-env'),
                {
                  targets: {
                    browsers: ['last 2 versions', 'ie 9', 'safari >= 7'],
                    ios: '8',
                    android: '5.0'
                  },
                  useBuiltIns: 'entry',
                  corejs: 3,
                  include: [],
                  exclude: []
                }
              ],

              require.resolve('@babel/preset-react'),

              require.resolve('@babel/preset-typescript')
            ],
            plugins: [
              require.resolve('@babel/plugin-proposal-optional-chaining'),
              require.resolve('@babel/plugin-proposal-class-properties'),
              require.resolve('babel-plugin-syntax-dynamic-import'),
              [
                require.resolve('@babel/plugin-transform-runtime'),
                {
                  corejs: 3
                }
              ]
            ]
          }
        },
        exclude: /node_modules/
      },
    ]
  }
}

经验证，该方法不用.babelrc文件也可以。而且需要编译ts文件的情况下，不添加ts-loader也可用。

三、纯 webpack配置方案2

module.exports = {
  module: {
    //模块
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: [
          {
            //用 babel-loader 把es6转es5
            loader: 'babel-loader'
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      },
    ]
  }
}

经验证，该方法不用.babelrc文件也可以。

该方案与上面一种方案等同。需要编译ts文件的情况下，需要添加ts-loader。