# qukan

**Repository Path**: bingyu123/qukan

## Basic Information

- **Project Name**: qukan
- **Description**: 是一个简单的社交平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-13
- **Last Updated**: 2022-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack

> 回顾：webpack  + react 

>  缺点 : 
>
> 1. 图片
> 2. 只有一个js 路由懒加载 
> 3. 开发环境和生产环境没有分开  npm start
> 4. static  public 
> 5. 没有优化 
>    1. 抽离文件
>    2. dll
>    3. cdn
>    4. history刷新404
> 6. 分割 webpack 4 
> 7. 打包速度

### 图片的处理

```js
npm i url-loader : 转换成base64 
npm i file-loader : 文件模块化

```

处理成静态资源文件

static 复制到 dist目录

### 拆分打包文件

> 你们公司 打包的时候 将webpack分成几个打包配置文件
>
> 3个左右
>
> webpack.base.js 基本的配置
>
> webpack.dev.js   开发环境的配置
>
> webpack.prod.js  生产环境的配置

```bash
npm i webpack-merge -D
```

## 2021年5月12日

> 回顾
>
> 上线 ：
>
> 1. git 多人合作
> 2. 使用eslint 
> 3. 技术
>    1. hooks
>    2. egg
>    3. 打包 + linux + pm2 + history 404的问题
>    4. 优化
> 4. 原型(蓝湖/墨刀) + 项目的搭建 + 服务器 + 测试 (禅道) + 抗压 (压力测试)
> 5. egg+myqsl  

### 1. 路由

刷新出现404的问题

引入了路由 模式: history模式 跳转路径的时候 向后台发送请求 

后台 devServer 然而 devserver 没有 /home这个接口

就会报404问题



> 怎么解决 : webpack里面配置一个配置项 
>
> 添加在devServer中 historyApifallback : true
>
> 此时引入的另一个问题 : 
>
> 当引入子路由的时候 
>
> 再次请求js文件就会报这个错 http://localhost:8080/home/bundle.js 404 这个路径不对
>
> 此时 要在出口文件中配置一个publicPath 

![1620809542183](image/1620809542183.png) 



### 2. 写逻辑

### 3. 打包

### 4. 本地测试

### 5. 线上测试

### 6. 线上问题解决

### 7. 优化 打包的体积 / 运行的速度 / 打包的速度

>
>
>react 环境搭建
>
>hooks
>
>useEffect

## 2021年05月13日

趣看

1. 登录注册 
   1. 密码 要用md5加密
2. 首页动态(已关注 推荐 最新)
   1. 评论和回复
3. 详情 可以评论 可以回复
4. 发布动态 文件上传
5. 我的页面 已关注 自己的发布 粉丝 点击某一个人 跳转到聊天页 只能和你关注的或者关注你的聊天

### 协作开发 git

### 搭建环境 webpack+react+hooks + linux + 线上的mysql

### 优化 一个人5块钱 60 /4 : 15 

1. 禅道 bug少的 20%  
2. 打包的体积 10% 
3. 功能的完整性 40%
4. 首次加载的运行的速度 30% 



### 协作开发 git

1. 远程仓库
2. 有分支
3. 协作 创建自己的名字  合并 : 每天合并一次