xiaohesong/react-by-webpack4

技术栈

react全家桶
- react
- redux
- react-redux
- react-router-dom
- redux-saga
- antd
- typescript
- eslint
- stylelint
mobx

包含mobx的版本

基础环境

node >= 7.1
port 支持自定义端口

例如.env.development配置XHS_PORT=8888，如果不配置则默认是3000端口.
PURGECSS

这个可以写在环境配置里，只有在设置成true的时候才会启用。

默认不启用。由于第三方库的过滤上存在一定的问题，设置白名单也存在一定的局限性。

开发环境

点击展开

```shell git clone git@github.com:xiaohesong/react-by-webpack4.git cp example.env.development .env.development npm i && npm start ```

正式环境

点击展开

```shell npm run build && npm run pro ```

环境配置

点击展开

支持配置环境变量 `.env`,`.env.development`, `.env.development.local`, `.env.production`, `.env.production.local`. 环境变量是以`XHS`开头. `.env.development` ```file XHS_NMAE='xiaohesong' XHS_ID='xhs' ``` `app.js` ```js ... console.log(process.env.XHS_NAME) //xiaohesong ... ``` > 如不想以`XHS`开头，可以在config/env下修改`NAMESPACE`. 目前使用到的优化有按需加载，webpack hash缓存.

目前效果

点击展开

> 注册页面 ![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/register.jpeg) > 登陆页面 ![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/login.jpeg) > 播放页面 ![](https://github.com/xiaohesong/TIL/blob/master/assets/front-end/imgs/react-by-webpack4/home.jpeg)