本文主要是介绍webpack4 + react + react-router + mobx + antd + axios + eslint 项目搭建，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用webpack4 + react + react-router + mobx + antd + axios + eslint 从零配置的react全家桶项目，
主要实现：
- react-router 配合 react-loadable 实现按需加载
- mobx 实现状态管理
- axios 前后端数据交互
- eslint 代码规范检测
- less 书写 style 样式
- react-html-attrs 插件使用class 替换掉 className
- babel-plugin-import antd 组件的按需加载
- webpack4 splitChunks 实现代码拆分，常用静态资源包拆分并缓存
- webpack4 minimizer 中配置 压缩js，css 代码
- webpack-bundle-analyzer 插件实现代码打包分析
- webpack-dev-server proxy 实现代理（也可以再config/env.js中配置）
- 区分 开发，测试，生产，三个不同环境，不同环境可以配置不同变量
克隆下来，删除我写的demo 后可以直接使用， 如果想使用 sass 需要自行安装并配置
github 项目地址
项目简介
webpack 版本和主要依赖包版本
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11","antd": "^4.1.0",
"axios": "^0.19.2",
"mobx": "^5.15.4",
"mobx-react": "^6.1.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-loadable": "^5.5.0",
"react-router-dom": "^5.1.2"
目录简介
--build/|-build.js // 执行npm run build 打包命令执行文件入口|-utils.js // webpack 配置中提取的公共方法|-webpack.base.config.js // webpack 公共基础配置|-webpack.dev.config.js // webpack 开发环境配置|-webpack.prod.config.js // webpack 测试正式打包配置
--config/|-env.js // 开发测试生产，不同环境配置的全局变量
--src/|-assets|-images // 图片|-less // 全局less，less变量文件
--router/|-loadable.js // react-loadable 按需加载插件封装|-router.config.js // 测导航栏数据文件|-router.js // 路由配置文件
--store/|-index.js // mobx全局状态文件
--utils/|-request.js // axios 全局拦截器配置文件
--views/ // 项目页面目录
--app.less // 全局样式
--main.js // 项目入口文件
--static // 静态资源目录
使用
项目clone 到本地
git clone https://github.com/dadanihoutao/react-project.git
安装依赖
npm install
运行
npm run dev
打包测试
npm run build-test
打包正式
npm run build
打包后模块分析(打包完成后会自行打开浏览器)
npm run analyz
版本问题
这个项目使用的是react 比较高的版本，
里边用到了很多react 的新特性，比如生命周期方法已经更改为
componentWillMount → UNSAFE_componentWillMount
如果安装好依赖后浏览器控制台出现警告 提示 componentWillMount 已经废弃，使用 UNSAFE_componentWillMount 新版生命周期函数，可以参考下边的文章进行修改
react中项目componentWillMount警告
[译]React v16.9 新特性
或者降低react 版本，但是就不能使用react 的新特性了。
详细介绍
此项目到此为止一共有6个版本号，之所以要打这么多版本号，是为了方便其他同学借鉴或者学习，每个版本都是配置好一些主要功能后，打了一个版本号，想学习的同学可以，从v.1.0.1 版本开始下载，查看配置。配置文件中有比较详细的注释。具体的配置过程这里就不详细叙述了。网上比较好的教程还是比较多的，我在搭建的过程中也参考了很多网络上的博客教程。最后会附上参考链接
tag 连接
v.1.0.5 之前是没有配置eslint 的，如果不想使用eslint 的同学，可以下载 v.1.0.4 使用
预计以后还会有一个版本，v.1.0.6 这个版本会把所有的配置文件中的注释删除掉，干净清爽，以后如果开发react 项目就省去了搭建的时间，可以直接使用了。
如果不想使用mobx ，喜欢使用redux 的话，需要自己配置，这里有一篇参考博客，写的比较详细，可能以后有时间，我也会再搞一个redux 版本的
react+redux+router+webpack+antd环境搭建一版
用webpack4从零开始构建react脚手架
上边的这篇文章也是使用的redux。配置redux 的话可以参考借鉴
写在最后
因为 webpack 更新比较快，webpack中文网的文档已经没有更新了，里边的内容还是webpack3版本的，但是官网上的版本好却是 4.42.1 的，刚开始阅读的时候没有发现，稍微往后发现了好多坑。就直接放弃这个文档了。后来找到一篇 印记中国 翻译的最新的webpack4 的文档，虽然里边也有几个小坑，但是绝对是现在市面上webpack4中文翻译最好的文档了，英语不好的小伙伴可以阅读这个文档，来学习webpack4 的知识。这里放个连接：
webpack4 最新中文文档, 印记中国翻译
我是阅读完中文文档以后开始搭建的，其中也在网上参考了很多资料，包括vue-cli2 搭建的项目中 webpack 的配置，熟悉vue 的同学，应该能发现，项目配置目录也是借鉴的 vue-cli2 生成的webpack3 的配置（vue-cli2 生成的webpack3 的配置因为是尤老大写的，还是有很多值得参考的地方的）
本文参考链接
主要参考下边的这篇博客，一共有5章，每一步配置写的都很详细，webpack 初学者，可以根据这篇文章从零配置搭建
react+webpack4搭建前端项目（一）
eslint 中文网
react+eslint 配置
eslint中文网 可以查阅所有的eslint 基本配置，可以根据自己喜欢的规则去配置
webpack 4 搭建 React 架构：实现热更新（二）
最后附上几篇非常精简的webpack4 的相关文章，用来快速学些入门
【Webpack】319- Webpack4 入门手册（共 18 章）（上）
【Webpack】320- Webpack4 入门手册（共 18 章）（下）
这篇关于webpack4 + react + react-router + mobx + antd + axios + eslint 项目搭建的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
