1、新建工程目录，进入目录，输入 npm init -y （-y是yes的意思，不询问设置，按照默认初始化）；
2、安装react/react-dom：npm install --save react react-dom；
3、安装react和react-dom的声明文件：npm install --save-dev @types/react @types/react-dom；
4、安装typescript和相关loader: npm install --save-dev typescript ts-loader source-map-loader；
5、安装插件html-webpack-plugin，该插件：npm install --save-dev html-webpack-plugin，该插件是可选的，作用是自动生成html，并自动引入最终打包好的js文件；
6、安装webpack相关，```npm install --save-dev webpack-dev-server webpack webpack-cli;
7、在项目根目录创建typescript配置文件tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
}
}
8、创建webpack配置文件：webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: "./src/index.tsx",
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist")
},
devServer:{
port: 9001,
open: true,
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader'
},
exclude: /node_modules/
},
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
title: "hello dog",
hash: false,
// template: path.resolve(__dirname, "src/index.html")
}),
]
}
9、编辑package.json，在script里增加"start": "webpack-dev-server";
10、创建入口文件index.tsx，这里可以愉快的写代码了；
11、npm start运行
以下步骤可选。由typescript语法写的代码，经过ts-loader可以成功转换为浏览器可以识别的js代码，也包括jsx语法，因为tsconfig.json中配置了"jsx": "react"。转换jsx语法的任务也可以交给babel，只要将jsx指定为preserve，然后指定babel-loader进行下一步转化，这个过程需要用到@babel/preset-react预设。
12、安装babel npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react;
13、添加babel配置文件babel.config.js:
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
[
"@babel/preset-react"
]
];
module.exports = { presets };
presets是按照逆序执行的
14、修改webpack.config.js文件，添加babel-loader：
rules: [
{
test: /\.tsx?$/,
loader:['babel-loader','ts-loader'],
exclude: /node_modules/
},
]
