TypeScript ~ TS Webpack构建工具 ⑦

import * as path from 'path';
import * as webpack from 'webpack';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 
const config: webpack.Configuration = {
  entry: './src/index.ts', // 项目的入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则表达式，匹配.ts或.tsx文件
        use: 'ts-loader', // 使用ts-loader处理这些文件
        exclude: /node_modules/ // 排除node_modules目录
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 自动解析的文件扩展名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' // 模板文件路径
    })
  ]
};
 
export default config;

这个代码实例展示了如何使用TypeScript创建一个简单的Webpack构建配置文件。它包括了入口点、输出配置、模块规则、解析策略以及插件的配置，并且可以被导出作为Webpack的构建配置使用。这个实例为开发者提供了一个清晰的构建工具配置示例，并且是学习Webpack和TypeScript结合使用的一个很好的起点。