create-react-app不用eject配置webpack

使用create-react-app脚手架搭建的react工程，webpack和相关的依赖都已经配置好了，开发编译打包都很省心。但是随着项目的深入，难免会遇到要改webpack配置的情况。

修改webpack配置的方法

执行npm run eject命令

create-react-app创建的工程，打开package.json文件，可以看到对react-scripts的依赖，就是它帮我们搞定了那些令人头疼的配置。
有兴趣的可以在node_modules里找到这个依赖，npm run eject命令就是把这个依赖分解出来。
执行eject之后，会删除react-scripts依赖，把webpack的配置文件分解到config文件夹，把相关的依赖添加到当前工程的package.json里。

react-scripts

使用react-app-rewired

一般我们要改的配置并不多，这种情况下一个更好的选择是react-app-rewired，不需要生成一堆配置文件。

使用步骤：

1. 安装相关的依赖：
   npm i react-app-rewired --save-dev
npm i customize-cra --save-dev
2. 修改package.json的scripts为

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

3. 在根目录下添加config-overrides.js配置文件
   具体支持的配置可以查看customize-cra文档

config-overrides.js

接下来需要添加或者修改webpack的配置，只需要关心config-overrides.js一个文件，非常清晰简洁。