先看下项目目录

src：文件夹为ts/tsx文件存放目录

dist：ts文件编译后得js存放目录

package.json：npm包配置文件

tsconfig.json：typescript配置文件

webpack.config.js：webpack配置文件

首先下载依赖包

全局包

npm install webpack  typescript -g

本地包

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

tsconfig.json 配置

详细参数解说，请参照：使用gulp实现typescript得自动化编译

下面配置webpack.config.js

其中：awesome-typescript-loader是用来编译ts文件得，也可以使用ts-loader,两者之间得区别，请参考：awesome-typescript-loader & ts-loader

配置完毕后，在src随便写一个ts，比如index.ts

然后运行命令：

webpack

此时就会编译成功

查看dist文件夹 就可以看出编译好得js