create-react-app項目配置（結合antd配置）

create-react-app項目配置

一、react-app-rewired && customize-cra

react-app-rewired是react社區開源的一個修改CRA配置的工具，例如擴展Create React App的Webpack配置，而customize-cra提供了一組用於自定義利用react-app-rewired核心功能的Create React App v2配置, 可以通過config-overrides.js文件來對webpack配置進行擴展

二、基本使用

​

1、安裝react-app-rewired

​ 因為此模塊是在開發環境中使用，因此我們安裝的時候需要--dev

cnpm install react-app-rewired --save-dev

yarn add react-app-rewired --dev

2、安裝customize-cra

​ 因為此模塊是在開發環境中使用，因此我們安裝的時候需要--dev

cnpm install customize-cra --save-dev

yarn add customize-cra --dev

3、修改package.json文件

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

4、在項目根目錄下面創建config-overrides.js文件

三、antdUI組件庫按需加載

​

​ 1、加載了全部的 antd 組件的樣式（對前端性能是個隱患）。

​ 2、需要對 create-react-app 的默認配置進行自定義，這里我們使用 react-app-rewired

​ 3、引入 react-app-rewired 並修改 package.json 里的啟動配置。由於新的 react-app-rewired@2.x 版本的關系，你還需要安裝 customize-cra。

​ 4、以上我們已經配置完畢

​

​

1、在config-overrides.js文件下進行文件的配置

module.exports = function override(config, env) {
  return config;
};

2、安裝babel-plugin-import

​ babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），現在我們嘗試安裝它並修改 config-overrides.js文件。

yarn add babel-plugin-import --dev

cnpm install babel-plugin-import --save-dev

const { 
    override, 
    fixBabelImports,
    addWebpackAlias
} = require('customize-cra');
const path = require("path");
module.exports = override(
    //按需加載antd
    fixBabelImports('import', {        
        libraryName: 'antd-mobile',        
        libraryDirectory: 'es',       
        style: 'css',
    }),
    //別名配置
    addWebpackAlias({        
        ["@"]: path.resolve(__dirname, "./src"),             
        ["@views"]: path.resolve(__dirname, "./src/views"),
        ["@components"]: path.resolve(__dirname, "./src/components")     
    })
);

四、create-react-app腳手架跨域配置

​ 1、在src目錄下創建setupProxy.js

​ 2、安裝http-proxy-middleware

yarn add http-proxy-middleware

​ 3、setupProxy.js文件配置

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { 
    target: 'https://www.baidu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }));
};