使用过create-react-app（以下简称cra）的朋友都知道，这是react官方的一款脚手架工具，内部集成了babel，webpack，webpack-dev-server等等。
以前我们要在cra中做webpack的配置，有三种方式：
1、运行npm run eject得到原始的webpack配置文件config，然后可以看到里面有prod和dev两个环境的相关配置；但是新版本cra你run eject之后，只有一个webpack.config.js文件了。
可以在这里面进行配置。但是本文中这不是我们推荐的方式。
2、不run eject。而是改写script文件中的js。这个本人没有操作过，这个就不详谈了。
3、使用react-app-rewired，安装这个工具后，在项目根目录中新建文件config-overrides.js文件。此时我们便可以在其中进行各种webpack的骚操作了~
但是！react-app-rewired2.x以后，不再支持injectBabelPlugin的方式，需要安装。
具体的，ant design官方文档已经给出了最新的解决方案。请前往详览。
这种方式就是我们推荐的方式。因为无需生成更多额外的文件，同时配置又趋于更简单可控的方式。
接下来我们就来具体说一下操作步骤。
首先，我们安装react-app-rewired。
$ yarn add react-app-rewired
然后修改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",} 接着，安装customize-cra
$ yarn add customize-cra
然后在根目录下添加config-overrides.js文件。
module.exports = function override(config, env) { // 关于webpack的相关配置 return config;}; 好了，基本的操作就是这样。下面我们再来说具体到我们的项目中，需要做的一些配置。
1、react项目中我们最常用的组件库antd，我们需要配置按需加载。
使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。
安装
$ yarn add babel-plugin-import
接着配置webpack
/* config-overrides.js */+ const { override, fixBabelImports } = require('customize-cra');- module.exports = function override(config, env) {- return config;- };+ module.exports = override(+ fixBabelImports('import', {+ libraryName: 'antd',+ libraryDirectory: 'es',+ style: 'css',+ }),+ ); 这样我们在组件中就可以按需引入组件库中所需要的组件了。
2、自定义主题
按照配置主题的要求，自定义主题需要用到 less 变量覆盖功能。
安装less和less-loader
$ yarn add less less-loader
配置webpack
/* config-overrides.js */- const { override, fixBabelImports } = require('customize-cra');+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es',- style: 'css',+ style: true, }),+ addLessLoader({+ javascriptEnabled: true,+ modifyVars: { '@primary-color': '#1DA57A' },+ }),); 这里利用了less-loader的modifyVars来进行主题配置。当然这里的modifyVars的值也可以是一个theme文件。
3、打包后我们会发现静态文件夹中会有很多的css和js的map文件，那么我们该怎么关闭sourcemap呢？
/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");+ process.env.GENERATE_SOURCEMAP = "false";module.exports = override( fixBabelImports("import", { libraryName: 'antd', libraryDirectory: "es", style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' }, })); ok，再次执行npm run build便不会产生map文件了。
还看到一种解决的方式如下，
const rewiredMap = () => config => { config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false; return config;};module.exports = override( // 关闭mapSource rewiredMap()); 参考地址：
4、最后我们来说说前端本地proxy的配置
开发中常见的问题就是跨域。那么我们前端惯用的方式就是给本地webpack启动的node服务设置代理。
那么具体到使用了新版的cra后，我们该怎么办呢？
很简单，在src目录下新建文件setupProxy.js（注意文件名一定要是这个名字，不要问什么，cra现在废弃了proxy对象配置的方式，将其作为单独模块。解析就是按 src/setupProxy.js这个路径）
安装http代理相关包http-proxy-middleware
$ yarn add http-proxy-middleware -D
配置如下，
const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api', { target: 'http://xx.xx.xx.xx:8000/', changeOrigin: true, pathRewrite: { '^/api': '' } }) )} 好了，现在你就可以愉快的访问接口了~
关于更多的customize-cra配置，大家可以自行查看文档。