# template-react-ts-webpack5

**Repository Path**: dancinglove/template-react-ts-webpack5

## Basic Information

- **Project Name**: template-react-ts-webpack5
- **Description**: dancinglove/template-react-ts-webpack5 模板
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-18
- **Last Updated**: 2021-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### react + ts + webpack开发模板

依赖插件

- react 相关
npm i react react-dom react-router-dom -S

- ts相关的声明包
npm i @types/react @types/react-dom @types/react-router-dom -D

- webpack 相关
webpack webpack-cli webpack-dev-server 

- 如果只使用ts和tsx 那么就只是需要 ts-loader
ts-loader

- 配置相关
npm i -D less less-loader url-loader source-map-loader thread-loader image-webpack-loader css-loader cross-env cache-loader

- eslint 配置的相关的包
    npm i eslint -D 下载之后 执行 npx eslint --init
    npx eslint --init 的选择

- preeter 代码格式化的相关的包

- git commit 代码校验的包


- 插件 添加

    // 友好的错误提示插件
    friendly-errors-webpack-plugin
    // 提示插件
    node-notifier
    // 文件体积监控
    webpack-bundle-analyzer
    // 提取css的 这样就可以把js和css分开，然后在加载的时候 并行加载
    mini-css-extract-plugin
    // 删除无用的css
    purgecss-webpack-plugin
    // 优化和压缩CSS资源的插件
    optimize-css-assets-webpack-plugin
    // 优化和压缩JS资源的插件，以前叫ugly-wepack-plugin
    terser-webpack-plugin
    //
    clean-webpack-plugin
    // webpack-merge 主要是用来做配置文件的合并