使用webpack实现typescript得自动化编译

先看下项目目录

使用webpack实现typescript得自动化编译_第1张图片

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

使用webpack实现typescript得自动化编译_第2张图片

tsconfig.json 配置

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

使用webpack实现typescript得自动化编译_第3张图片

下面配置webpack.config.js

使用webpack实现typescript得自动化编译_第4张图片

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

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

使用webpack实现typescript得自动化编译_第5张图片

然后运行命令:

webpack

使用webpack实现typescript得自动化编译_第6张图片

此时就会编译成功

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

你可能感兴趣的:(使用webpack实现typescript得自动化编译)