webpack 解析ts、tsx语法

修改tsconfig.json
	"jsx": "react"

要使用jsx语法,创建的文件必须是.tsx文件

1、解析ts、tsx语法(配置loader或使用Babel)
	方式一:配置loader
		module:{
			rules:[
				方式一:ts-loader
					{
						test:/\.tsx?$/,
						use:[
							{
								loader:'ts-loader',
								options:{
									transpileOnly: true,	只进行语法转换,不进行类型校验,提高构建速度
								}
							}
						],
						exclude:/node_modules/
					}
				方式二:awesome-typescript-loader
					对比ts-loader好出:
						(1)更适合与babel集成,使用babel的转义和缓存
						(2)使用自身提供的插件,就可以把类型检查放在独立进程中进行,但可能检查不出来
					{
						test:/\.tsx?$/,
						use:[
							{
								loader:'awesome-typescript-loader',
								options:{
									transpileOnly: true,	只进行语法转换,不进行类型校验,提高构建速度
								}
							}
						],
						exclude:/node_modules/
					}
			]
		},
	
	方式二:使用Babel
		缺点:Babel无法编译:命名空间、类型断言(只兼容as的语法,不兼容<>语法)、常量枚举、默认导出(export =语法)
		(1)下载依赖:
			@babel/cli @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
		(2)配置.babelrc文件:
			{
				"presets":[
					"@babel/preset-env",
					"@babel/preset-typescript"
				],
				"plugins":[
					"@babel/plugin-proposal-class-properties",
					"@babel/plugin-proposal-object-rest-spread"	支持...剩余操作符和扩展操作符等
				]
			}
		(3)修改tsconfig.json
			"noEmit": true,  不输出ts文件,只做类型检查
			
		(4)运行类型检查
			tsc --watch
			
2、若采用loader,使用插件将类型检查放在独立进程中进行
	(1)ts-loader:
		cnpm install -D fork-ts-checker-webpack-plugin
		
		plugins:[
			new ForkTsCheckerWebpackPlugin()	使用插件进行类型校验
		]
		
	(2)awesome-typescript-loader:
		const { CheckerPlugin}= require("awesome-typescript-loader")
		
		plugins:[
			new CheckerPlugin()	使用插件进行类型校验
		]

代码示例:
babel依赖:

.babelrc配置