本人工作栈为dva+antd，使用阿里开源出来的组件有一段时间之后，决定不依赖阿里的框架自己打个环境写一些组件出来，一来为了熟悉工作流程，二来也是为了更好的理解原理，从而更好的满足工作中的需求
二次元萌图
源码地址：https://github.com/jdkwky/my-react-example
预览地址：http://47.94.218.152 (目前只兼容chrome和IEedge)
1. 技术点 react + webpack + antd
2. 学习流程
首先电脑上要有nodejs环境，本文并不涉及nodejs，主要是用nodejs环境中的npm安装需要的依赖包（nodejs安装即可，npm如果在下载包的时候很慢，可以将镜像换成淘宝的镜像）
npm i create-react-app -g 全局安装create-react-app脚手架
create-react-app创建自己的工程文件
写自己的webpack配置文件
跨域请求时，在webpack中配置代理，在服务器上采用nginx代理转发
打包
部署到服务器中
3. 详解
安装nodejs环境和用create-react-app创建react脚手架过程省略，因为比较简单，安装都比较方便，不会出什么问题
-
webpack配置文件
devServer: { contentBase: './public', publicPath: '/', historyApiFallback: true, inline: true, proxy: { '/search/*': { target: 'https://image.baidu.com', changeOrigin: true } } },<!--当访问/search/路径下的所有url时，均走image.baidu.com这个域名-->
对webpack简单的理解可以参考博文：webpack初印象；
在本程序中的一个难点在于既想要引入antd的样式文件，又想要使用css modules,本程序中的解决方案就是针对不同目录中的css文件分别进行匹配，antd组件中的样式文件一定都在node_modules文件夹中，而本地自己写的文件一定都在src文件夹中，具体解决方案详见webpack.config.js；
在文件配置中遇到的坑详见 react-webpack-antd--环境篇；
遇到跨域问题在本地的解决方案为在本地配置代理：
部署服务器
服务器申请的为centos阿里云服务器，将打包好的静态文件部署在nginx中，nginx服务器默认监听80端口，启动nginx时可能访问不到，这时需要在“安全组规则”中添加一条规则：
nginx监听80端口
作者：jdkwky
链接：https://www.jianshu.com/p/7231659644b5
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2983/viewspace-2814112/ ，如需转载，请注明出处，否则将追究法律责任。
