React+TypeScript+webpack4多入口配置详解

资源

项目目录

├── dist # 打包结果目录│  ├── demo1 //类别demo1的打包结果│  │  ├── demo1.himl│  │  ├── demo1.js│  │  └── demo1.css│  └── demo2 ... //类别demo2的打包结果├── src # 业务资源文件目录│  ├── category //项目分类│  │  ├── demo1│  │  ├── demo2│  │  └── ...│  ├── components //公共组件│  ├── util //公共资源│  └── custom.d.ts //项目全局变量声明文件├── index.html //项目启动入口├── .gitignore //git忽略文件├── .eslintrc.js //eslint校验配置├── package.json //依赖包├── tsconfig.json //ts配置├── webpack.config.build.js //webpack打包├── webpack.config.base.js //webpack基础配置└── webpack.config.js //项目启动配置

前言

对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。

Typescript 给 React 带来很多好处：

需求

要搭建一个React+TypeScript+webpack的项目的话，一般都是团队开发多人多文件项目，在搭建之前需要优先考虑以下几个方面：

安装

前置安装

首先需要全局安装typescript，这里默认大家都已经安装了node以及npm

npm install -g typescript

首先新建文件夹并进入

mkdir tsDemo && cd tsDemo

然后进行初始化，生成package.json和tsconfig.json

npm init -y && tsc --init

安装开发工具

npm install-D webpack webpack-cli webpack-dev-server

安装react相关

因为需要整合ts，而react原本的包是不包含验证包的，所以这里也需要安装相关ts验证包

npm install -S react react-domnpm install -D @types/react @types/react-dom

安装ts-loader

npm install -D ts-loader

以上是基本的 后续会贴出项目demo里面包含所有依赖包

webpack配置

添加webpack文件

根目录下新建webpack.config.base.js、webpack.config.build.js、webpack.config.js文件