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': ''
    }
  }));
};