使用Webpack打包Typescript ES6项目（转ES5）

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.ts', // 项目入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包后的目录
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'] // 自动解析的文件扩展名
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则匹配ts或tsx文件
        use: [
          {
            loader: 'babel-loader', // 使用babel-loader进行转换
            options: {
              presets: [
                '@babel/preset-env' // 转换ES6到ES5
              ]
            }
          },
          'ts-loader' // 使用ts-loader处理ts/tsx文件
        ],
        exclude: /node_modules/ // 排除node_modules目录
      },
      {
        test: /\.json$/,
        type: 'json',
        exclude: /node_modules/
      }
    ]
  }
};

这个配置文件定义了一个简单的Webpack打包流程，它将Typescript代码转换为ES5代码，并输出到dist目录下的bundle.js文件中。在这个配置中，我们使用了babel-loader来处理ES6语法，并使用ts-loader来处理Typescript代码。这样，你就可以将你的项目打包成一个兼容大部分浏览器的JavaScript文件了。