本人工作棧為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配置文件

  1. 對webpack簡單的理解可以參考博文：webpack初印象；
  2. 在本程序中的一個難點在于既想要引入antd的樣式文件，又想要使用css modules,本程序中的解決方案就是針對不同目錄中的css文件分別進行匹配，antd組件中的樣式文件一定都在node_modules文件夾中，而本地自己寫的文件一定都在src文件夾中，具體解決方案詳見webpack.config.js；
  3. 在文件配置中遇到的坑詳見 react-webpack-antd--環境篇；
  4. 遇到跨域問題在本地的解決方案為在本地配置代理：

  devServer: {
  contentBase: './public',
  publicPath: '/',
  historyApiFallback: true,
  inline: true,
  proxy: {
    '/search/*': {
      target: 'https://image.baidu.com',
      changeOrigin: true
    }
  }
  },
  <!--當訪問/search/路徑下的所有url時，均走image.baidu.com這個域名-->
  

• 部署服務器

  服務器申請的為centos阿里云服務器，將打包好的靜態文件部署在nginx中，nginx服務器默認監聽80端口，啟動nginx時可能訪問不到，這時需要在“安全組規則”中添加一條規則：

  
  
  nginx監聽80端口