react create-react-app 使用@引入模块简化 简化相对路径写法

解决方式一
1、npm install react-app-rewired -D 或是 yarn add react-app-rewired -D
2、在 package.json文件里以下的命令

修改为

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

3、最后在根目录文件下，新建 “config-overrides.js” 文件，替换默认的路径配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
  config.resolve.alias = {
    '@': resolve('src')
  }
  return config
}

4、重启项目

解决方式二

1、查看项目中是否含有config文件夹

2、如果项目中没有config文件夹，则执行 npm run eject命令

输入 y 然后回车就可以看到config文件夹了

3、打开 config 下的 webpack.config.js文件

找到resolve中的alias增加别名符号和对应的路径地址

5、重启项目