首先假定你的开发电脑上已经安装了npm。
1、环境：
全局安装TypeScript（安装tsc命令）
npm i -g typescript
全局安装Webpack（安装webpack命令）
npm i -g webpack
2、工程：
新建工程目录，并切换到工程目录下
mkdir ~/myProject# cd ~/myProject
初始化工程，并使用npm下载react和react-dom
npm init# npm i --save react react-dom @types/react @types/react-dom
初始化typescript环境，并创建tsc的配置文件tsconfig.json
tsc --init
修改tsconfig.json，增加或修改的内容
compilerOptions.target = "es6"
compilerOptions.jsx = "react"
compilerOptions.outDir = "path/to/js"
compilerOptions.watch = true
files = [
'path/to/src/a.tsx',
'path/to/src/b.tsx'
]
创建webpack配置文件webpack.config.js，并填写内容
const path = require('path');
module.exports = {
entry: {
'a': 'path/to/js/a.js',
'b': 'path/to/js/b.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
// mode: 'production',
};
3、开发 && 打包
实时监听文件变化，并自动打包
typescript实时编译
tsc --watch
因为之前的tsconfig.json配置文件中，配置了watch=true，所以默认加载当前目录的tsconfig.json时，会自动以监听的方式启动。一旦发现path/to/src目录下的tsx文件发生变化，会自动创建对应的path/to/js目录下的js文件。
webpack实时打包
webpack --watch
监听到path/to/js目录下的js文件内容发生变化，则自动进行打包操作，生成到dist目录下。
但是前面webpack.config.js文件中配置的mode模式为development开发模式。所以当项目最终上线时，还需要进行一次手动打包，直接指定模式为production生产模式。
生产模式会针对js和css内容进行压缩处理，去除其中的注释、空行等无用内容。
webpack --mode production
就这些了，暂时记录到这儿吧~~~