本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。
本文代码地址：ts-react-redux
建议将代码拉下来之后，配合本文一起查看，效果更佳。
代码下载命令：git clone https://github.com/vettel-qin/ts-react-redux.git
相关文章目录
从零开始，一步一步搭建Typescript + React + Redux项目——创建项目结构（一）
从零开始，一步一步搭建Typescript + React + Redux项目——开发环境配置（二）
从零开始，一步一步搭建 Typescript + React + Redux项目——集成React（三）
从零开始，一步一步搭建 Typescript + React + Redux项目——集成Redux（四）
从零开始，一步一步搭建 Typescript + React + Redux项目——项目打包（五）
从零开始，一步一步搭建 Typescript + React + Redux项目——团队合作规范（六）
一、webpack 配置
1、安装webpack相关插件
（1）、为了用Typescript书写 webpack 的配置文件，必须先安装相关依赖：
yarn add add typescript ts-node @types/node -D
（2）、webpack原本的包不包含验证包，所以需要安装相关ts验证包
yarn add webpack @types/webpack webpack-cli -D
2、入口和出口
（1）、在tools目录下新建paths.config.ts
（2）、在tools目录下新建webpack.config.ts 增加如下代码：
3、配置html-webpack-plugin
首先安装yarn add html-webpack-plugin @types/html-webpack-plugin -D，然后在webpack的plugins配置项下进行简单配置：
4、设置模式
webpack 配置中的 mode 属性，可以设置为 'development' 和 'production'，然后在webpack.config.ts中添加如下配置：
5、设置devtool
为了方便在项目出错时，迅速定位到错误位置，可以设置 devtool，生成资源映射，我们这里使用
inline-source-map，更多选择可以在这里查看区别。然后在webpack.config.ts中添加如下配置：
6、使用 webpack-dev-server 启动项目服务
安装 yarn add webpack-dev-server @types/webpack-dev-server -D，然后在webpack的devServer配置项下进行简单配置
7、启动热加载
在webpack的plugins配置项下添加new webpack.HotModuleReplacementPlugin(),在devServer配置项下添加hot: true
8、在package.json文件中添加一个执行脚本，用来执行webpack命令：
9、运行项目，测试配置是否成功
执行 yarn start 命令，命令行提示成功后，在浏览器器打开http://localhost:8080，可以看到
二、安装 react 相关
react原本的包不包含验证包，所以需要安装相关ts验证包
yarn add react react-dom -S
yarn add @types/react @types/react-dom -D
配置tsconfig.json
三、配置 ts\tsx 相关 babel
1、使用babel-loader
安装yarn add @babel/core babel-loader -D，然后在webpack的module配置项下进行配置
2、使用babel相关presets
@babel/preset-env，可以在项目中使用所有ECMAScript标准里的最新特性。
@babel/preset-react，可以在项目中使用 react 语法。
安装yarn add @babel/preset-env @babel/preset-react -D，然后在webpack的module配置项下添加如下配置：
3、使用 babel 相关 plugins
@babel/plugin-syntax-dynamic-import，可以在项目中使用import()这种语法
安装 yarn add @babel/plugin-syntax-dynamic-import -D，然后在webpack的module配置项下添加如下配置：
4、安装ts-loader
这款loader用于将ts代码编译成js代码
yarn add ts-loader -D，然后在webpack的module配置项下添加如下配置：
5、使用cache-loader
在一些性能开销较大的loader之前添加此loader,以将结果缓存到磁盘里。
安装 yarn add cache-loader -D，然后在webpack的module配置项下babel-loader之前添加配置：
四、配置 CSS 相关 loader
1、支持sass
安装yarn add style-loader css-loader node-sass sass-loader -D
配置webpack,在module.rules下面对.scss和.css文件类型的编译配置
2、自动添加浏览器前缀
安装yarn add postcss-loader autoprefixer -D，然后在webpack.config.js的module.rules配置postcss-loader, 并修改css-loader前应用的loader数量为2
3、配置公共scss
（1）、新建公共样式目录
在src目录下新建styles文件夹，然后在styles文件夹新建variables.scss文件用于存放样式变量
（2）、引用公共scss
a、在tools文件夹中的paths.config.ts添加
b、使用node-sass的属性includePaths进行优化
c、效果（不管文件层级有多深都可以直接引入）
五、配置图片、文件相关loader
安装 yarn add url-loader file-loader -D，然后在webpack.config.js的module.rules配置url-loader、file-loader
六、优化路径
1、第一种方案在webpack.resolve.alias中进行路径配置
同时需要在tsconfig.json中进行配置
2、第二种方案， 用tsconfig-paths-webpack-plugin这个包将tsconfig中对路径的设置映射到webpack配置中去，这样就不需要在webpack中再进行一次路径的配置了，首先安装:yarn add tsconfig-paths-webpack-plugin -D，然后采用第一种方案的tsconfig配置，接着配置webpack,引入tsconfig-paths-webpack-plugin
七、启动react
1、在src/components目录下新建App.tsx和App.css
App.tsx
App.css为reset.css，可参考https://www.css-reset.com/
2、修改src/entries/index.ts文件为index.tsx并引用App组件
3、修改webpack.config.ts入口
4、运行项目，测试配置是否成功
文章及代码中如有问题，欢迎指正，谢谢！