前言
Create React App是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。
Ant Design是一套企业级 UI 设计语言和 React 组件库。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
Ant Design Pro
是一个企业级中后台前端/设计解决方案。
Ant Design Mobile
是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。
antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。它的特性：
提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。使用 TypeScript 开发，提供完整的类型定义文件。全链路开发和设计工具体系。数十个国际化语言支持。深入每个细节的主题定制能力。
接下来，我们来看怎样在 React 项目中使用 antd 开发移动端项目，并且完成自定义 webpack 配置。
1. 创建 react 项目
使用 create-react-app 脚手架，可以快速创建一个 react 单页面项目，自动创建的项目是基于webpack + ES6。在终端中执行下面的命令，即可快速创建一个react 项目。
npm install -g create-react-app my-app
国内使用 npm 速度很慢，在终端执行下面的命令，可以将npm镜像切换为淘宝镜像，再进行 npm install 安装
npm config set registry http://registry./
不想全局安装的话，也可以使用npx命令，在终端中执行以下命令，./表示在当前目录下创建 react 项目，版本要求： Node >= 8.10 和 npm >= 5.6。
npx create-react-app ./
安装成功后，执行npm start即可启动项目。
在浏览器中打开 http://localhost:3000/ ，看到下面这个页面，则说明项目创建成功了。
2. 直接安装并引入 antd
在终端中执行下面的命令，安装 antd
npm install antd-mobile --save
修改 src/App.js 文件，引入 antd 的按钮组件。
import React from 'react';import {Button } from 'antd-mobile';import './App.css';const App = () => (<div className="App"><Button type="primary">Button</Button></div>);export default App;
修改 src/App.css，在文件顶部引入 antd-mobile.css 文件
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'
重新启动项目，可以看到页面上已经有了 antd-mobile 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。
3. 高级配置
上面的操作在实际开发中还有一些优化的空间，比如无法进行主题配置，而且上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。
如果我们需要对 create-react-app 的默认配置进行自定义，这里我们使用react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装customize-cra。
3.1 安装 react-app-rewired customize-cra
在终端中执行下面的命令，安装 react-app-rewired customize-cra
yarn add react-app-rewired customize-cra -D
3.2 修改 package.json 文件
修改package.json文件对应内容
/* package.json */"scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- "test": "react-scripts test",+ "test": "react-app-rewired test",}
3.3 创建 config-overrides.js 配置文件
在项目根目录下创建 config-overrides.js 配置文件，用于修改 webpack 配置项。
const {override} = require("customize-cra");module.exports = function override(config, env) {// do stuff with the webpack config...return config;};
做完上述操作后，执行npm start或者yarn start，检查项目是否能够正常启动。
3.4 安装 antd-mobile UI库
终端中执行下面的命令，安装 antd-mobile UI库
yarn add antd-mobile -S
按需加载要使用的模块，并引入样式文件
import React from 'react';import {Button} from 'antd-mobile';import 'antd-mobile/dist/antd-mobile.css'const App = () => (<div className="App"><Button type="primary">Button</Button></div>);export default App;
3.5 配置别名
webpack 中配置别名，修改 config-overrides.js 配置文件的内容如下：
const {override,addWebpackAlias} = require("customize-cra");const path = require("path");module.exports = override( addWebpackAlias({["assets"]: path.resolve(__dirname, "./src/assets/")}));
点击查看
关于 customize-cra 的更多用法（如修改 webpack 更多配置项）。
3.6 配置代理
进行 Mock 数据的时候，可能会需要配置代理，我们使用 http-proxy-middleware 插件来完成这个功能。终端中执行下面的命令，安装 http-proxy-middleware 插件：
yarn add http-proxy-middleware -D
然后在 src目录下新建 setupProxy.js 配置文件，并进行相关的配置：
/* setupProxy.js */const {createProxyMiddleware} = require('http-proxy-middleware')module.exports =function(app){app.use('/api',createProxyMiddleware({target:"http://localhost:3033/",changeOrigin: true,pathRewrite:{'/api':''}}))}
3.7 使用 scss 样式
基于 creat-react-app 框架，使用 scss 语法，需要安装 node-sass，在终端中执行下面的命令，安装 node-sass
yarn add node-sass -S
安装完成后，不需要做额外的配置，可以直接引入 .scss 文件，react 底层会自动解析 scss 文件。
import './common.scss'
3.8 使用 Css-in-Js
在终端中执行下面的命令，安装 styled-components，使用 -S，作为开发依赖
yarn add styled-components -S
新建后缀为 .js 的样式文件，例如新建 HeaderBar.style.js 文件内容如下：
import styled from 'styled-components'import searchIcon from 'assets/images/search.png' //导入图片const HeaderBarContainer=styled.div`background:url(${searchIcon}) left center no-repeat;line-height:0.9rem;text-align:center;font-size:0.4rem;`export {HeaderBarContainer}
在组件中使用：
import React, {Component } from 'react'import ReactDOM from 'react-dom'import {HeaderBarContainer} from './HeaderBar.style'class HeaderBar extends Component {render() {return (<HeaderBarContainer>标题内容</HeaderBarContainer>)}}ReactDOM.render(<HeaderBar />,document.getElementById('root'));
需要注意的是：
styled-components 插件，不能跟 postcss 同时使用，也就是不能自动将 px 单位转成 rem 或者 vw；在样式组件里直接写图片路径是解析不了的，需要使用 import 先导入图片再写入 url 里，导入时会将图片解析成 Base64 图片编码；
React 项目中使用 antd 组件库开发移动端项目，在项目中自定义 webpack 配置，就先写这么多，以后用到别的内容再来更新。
