使用 webpack 打包 typescript(.ts)； babel.js 做低版本浏览器兼容

为了使用webpack打包TypeScript文件并且通过Babel实现对低版本浏览器的兼容，你需要安装相应的webpack插件和loader，以及Babel和TypeScript的相关依赖。以下是一个基本的配置示例：

首先，确保你已经安装了以下依赖：

npm install --save-dev webpack webpack-cli typescript ts-loader babel-loader @babel/core @babel/preset-env

然后，创建一个webpack.config.js配置文件，并添加以下配置：

const path = require('path');
 
module.exports = {
  entry: './src/index.ts', // 入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader', // 处理 TypeScript 文件
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader', // 使用 Babel 处理 JS 文件
          options: {
            presets: [
              [
                '@babel/preset-env', // Babel 预设，用于转换 ES6+ 到低版本浏览器可识别的代码
                {
                  targets: '> 0.25%, not dead', // 目标浏览器环境
                },
              ],
            ],
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // 解析模块时会使用的扩展名
  },
};

接下来，创建一个tsconfig.json配置文件，以配置TypeScript编译选项：

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitReturns": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

最后，确保你有一个.babelrc或babel.config.js文件来配置Babel：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

这样配置后，当你运行webpack打包命令时，它会处理src/index.ts文件，并生成一个兼容较多浏览器的dist/bundle.js文件。