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 章）（下）