如何rewire create-react-app项目配置

react脚手架不eject修改配置文件如@地址别名alias的方法

1) 安装 react-app-rewired

对于使用 Webpack 4 的 create-react-app 2.x

$ npm install react-app-rewired --save-dev

对于 create-react-app 1.x 或 react-scripts-ts 与 Webpack 3：

$ npm install react-app-rewired@1.6.2 --save-dev

2) 在根目录中创建一个 config-overrides.js 文件

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

/* config-overrides.js */
const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
module.exports = override(
    addWebpackAlias({
      ['src']: path.join(__dirname,'./src')
})
)

没有安装customize-cra模块的话，需要安装一下

3) 替换 package.json 中 scripts 执行部分

/* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

4)重新启动项目即可

npm run start