通过create-react-app脚手架创建的项目，配置绝对路径

在项目当中，基于模块化的开发，我们需要大量引用文件或模块，此时需要用到绝对路径。

因为使用相对路径存在一个明显的问题：当文件目录发生变化时，需要频频修改相对路径。一个比较常见的情形是：在React开发中，我们经常需要导入组件，而组件一般都是放在components目录下。组件的位置一般不会改变，但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径，则需要对导入路径进行修改；而如果使用绝对路径，不管当前文件放到哪里都可以正确导入组件。

配置导入根路径需要在webpack中配置，而react使用脚手架创建的项目，默认将babel、webpack等内容全部封装到react-scripts中，此时想要更改webpack中的内容，可以通过以下三种方法。

方法一：

打开src/node_module/react-scripts/config/webpack.config.js，全局搜索alias

添加如下代码：

'@': path.resolve('src'),

方法二：

执行npm run eject解开react-scripts包

• npm run eject 命令无法撤销
• 执行后，会出现config 和scripts 两个文件夹

在新出现的config 文件夹中，找到 webpack.config.js 文件，在alias 中插入'@': path.resolve('src'),就可以了

方法三：

使用react-app-rewired来对react-scripts进行hack。

yarn add -D react-app-rewired

然后修改package.json，将start、build、test三个命令由react-scripts换成react-app-rewired

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

在根目录下创建config-overrides.js：

const path = require('path');
const rootPath = path.resolve(__dirname, 'src');

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@'] = rootPath;
    return config;
  },
}

注意：按以上三种方法之一修改完文件后，必须先重启项目，然后再使用绝对路径，@代表的就是根目录/src 。