本文详细介绍了如何从零开始搭建一个 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@3.8.3 ts-node@8.8.2 @types/node@13.9.1 -D
（2）、webpack原本的包不包含验证包，所以需要安装相关ts验证包
yarn add webpack@4.42.1 @types/webpack@4.41.10 webpack-cli@3.3.10 -D
2、入口和出口
（1）、在tools目录下新建paths.config.ts??
（2）、在tools目录下新建webpack.config.ts 增加如下代码：??
3、配置html-webpack-plugin
首先安装yarn add html-webpack-plugin@3.2.0 @types/html-webpack-plugin@3.2.0 -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@3.10.3 @types/webpack-dev-server@3.10.1 -D，然后在webpack的devServer配置项下进行简单配置??
?7、在package.json文件中添加一个执行脚本，用来执行webpack命令：??
?8、运行项目，测试配置是否成功
执行 yarn start 命令，命令行提示成功后，在浏览器器打开http://localhost:8080，可以看到??
二、安装 react 相关
react原本的包不包含验证包，所以需要安装相关ts验证包
yarn add react@16.13.1 react-dom@16.13.1 -S
yarn add @types/react@16.9.34 @types/react-dom@16.9.6 -D
配置tsconfig.json
三、配置 ts\tsx 相关 babel
1、使用babel-loader
安装yarn add @babel/core@7.9.0 babel-loader@8.1.0 -D，然后在webpack的module配置项下进行配置??
?2、使用babel相关presets
@babel/preset-env，可以在项目中使用所有ECMAScript标准里的最新特性。
@babel/preset-react，可以在项目中使用 react 语法。
安装yarn add @babel/preset-env@7.9.5 @babel/preset-react@7.9.4 -D，然后在webpack的module配置项下添加如下配置：??
?3、使用 babel 相关 plugins
@babel/plugin-syntax-dynamic-import，可以在项目中使用import()这种语法
安装 yarn add @babel/plugin-syntax-dynamic-import@7.8.3 -D，然后在webpack的module配置项下添加如下配置：??
?4、安装ts-loader
这款loader用于将ts代码编译成js代码
yarn add ts-loader@7.0.0 -D，然后在webpack的module配置项下添加如下配置：??
?5、使用cache-loader
在一些性能开销较大的loader之前添加此loader,以将结果缓存到磁盘里。
安装 yarn add cache-loader -D，然后在webpack的module配置项下babel-loader之前添加配置：??
6.启动react测试
（1）、修改src/entries/index.ts文件为index.tsx
（2）、修改webpack.config.ts入口
（3）、运行项目，测试配置是否成功
??四、配置 CSS 相关 loader
1、支持sass
安装yarn add style-loader@1.1.4 css-loader@3.5.2 node-sass@4.13.1 sass-loader@8.0.2 -D
配置webpack,在module.rules下面对.scss和.css文件类型的编译配置??
2、自动添加浏览器前缀
（1）、安装yarn add postcss-loader@3.0.0 autoprefixer@9.7.6 -D，然后在webpack.config.js的module.rules配置postcss-loader??, 并修改css-loader前应用的loader数量为2
（2）、在package.json里面配置定义需要支持的浏览器范围
?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、图片篇
（1）、在src目录下新建assets目录存放图片，并在index.tsx引用
注：出现“找不到?？椤蔽侍?，
这个问题是因为图片文件中没有类似export这样的关键词用于导出一个?？?，所以导致找不到?？?，可以通过ts的类型定义文件中的模块声明（declare module）来解决。
解决方案：
在根目录下新建一个typings文件夹，用于存在放图片等模块声明， 以及后续需要用到的全局校验接口，在typings文件夹新建import.d.ts文件
（2）、在src/entries新建样式文件为index.scss并在index.tsx引用
2、字体篇
3、音频篇
??六、优化路径
1、第一种方案在webpack.resolve.alias中进行路径配置??（推荐）
?同时需要在tsconfig.json中进行配置??
?2、第二种方案， 用tsconfig-paths-webpack-plugin这个包将tsconfig中对路径的设置映射到webpack配置中去，这样就不需要在webpack中再进行一次路径的配置了，首先安装:yarn add tsconfig-paths-webpack-plugin@3.2.0 -D，然后采用第一种方案的tsconfig配置，接着配置webpack,引入tsconfig-paths-webpack-plugin??
七、启动热加载
1、在devServer配置项下添加hot: true和hotOnly: true
2、在webpack的plugins配置项下添加new webpack.HotModuleReplacementPlugin()和new?webpack.NamedModulesPlugin()
3、安装yarn add?react-hot-loader@4.12.20 -D，在webpack.config.ts的entry中加入react-hot-loader/patch，且一定要写在entry的最前面，如果有babel-polyfill就写在babel-polyfill后面。在babel-loader中添加plugin
4、最后，需要在页面的主入口中添加相关代码
（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组件
注：出现'类型“NodeModule”上不存在属性“hot”'问题，解决办法：
a.if(moduleasany).hot{}
b. yarn add @types/webpack-env -D
??（3）、运行项目，测试配置是否成功
文章及代码中如有问题，欢迎指正，谢谢！
