React配置路径别名

在react中，都是组件化开发，大部分都会import 组件名 from './../../组件路径，这样写太臃肿和不美观，可以通过配置来改变这个写法

通过安装customize-cra插件来实现

• 在根目录新建config-overrides.js

const {
  override,
  addWebpackAlias
} = require('customize-cra')
const path = require('path')

module.exports = override(
  // 路径别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@c': path.resolve(__dirname, 'src/components'),
    '@views': path.resolve(__dirname, 'src/views'),
    '@utils': path.resolve('src/utils'),
    '@styles': path.resolve('src/styles'),
  })
)

• 修改package.json文件

 原本之前的
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
修改之后
scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• 这边保存重启一下即可