[TS基础]TS的编译选项，WebPack打包TS代码

在WebPack中打包TypeScript代码，你需要安装相关的loader。以下是步骤和示例配置：

1. 安装必要的npm包：

npm install --save-dev typescript ts-loader source-map-loader

2. 在项目根目录下创建一个tsconfig.json文件，用于配置TypeScript编译选项。
3. 配置WebPack。在项目根目录下创建一个webpack.config.js文件，并添加以下配置：

const path = require('path');
 
module.exports = {
  entry: './src/index.ts', // 项目入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), // 打包后的目录
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'], // 自动解析的文件扩展名
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader', // 使用ts-loader处理ts文件
          },
        ],
        exclude: /node_modules/,
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        use: {
          loader: 'source-map-loader', // 为js文件生成source map
        },
      },
    ],
  },
};

4. 在package.json中添加一个脚本来运行WebPack：

"scripts": {
  "build": "webpack"
}

运行以下命令来打包你的TypeScript代码：

npm run build

这样，WebPack会读取webpack.config.js中的配置，编译TypeScript代码，并打包到指定的输出目录中。