Javascript 网页包生成：未定义类扩展值

我有3个文件，如下所示：

util/index.ts

export * from './Vector2'
export * from './Sprite'
export * from './GameObject'
export * from './Component'

export interface ComponentType<T extends Component> {
    new(gameObject: GameObject): T;
}

export class Component { }

import { Component } from '../util'
export class Rigidbody extends Component { }

util/Component.ts

export * from './Vector2'
export * from './Sprite'
export * from './GameObject'
export * from './Component'

export interface ComponentType<T extends Component> {
    new(gameObject: GameObject): T;
}

export class Component { }

import { Component } from '../util'
export class Rigidbody extends Component { }

在编辑器中，当代码编译成javascript时，一切都正常工作。但是，当我在浏览器中运行代码时，会出现以下错误：

未捕获的TypeError:未定义的类扩展值不是构造函数或null

它指的是导出类刚体扩展组件

如果我将导入更改为导入

组件

文件，而不是导入

索引

文件，它将工作：

import { Component } from '../util/Component'

我还有一个

Transform

文件，它导入

组件

文件，这个文件也做同样的事情

是我做错了什么，还是我用webpack构建它的方式

这是我的网页文件：

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      PIXI: path.join(__dirname, 'node_modules/pixi.js/lib/index.js')
    }
  },
  output: {
    libraryTarget: 'var',
    library: 'phoenix',
    filename: 'phoenix.js',
    path: path.resolve(__dirname, 'dist')
  }
};