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

解决方式一

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

 

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

 

 

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

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

 

 

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

5、重启项目

 

解决方式二

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、重启项目

 

解决方式三

引入craco

$ yarn add @craco/craco

修改package.json文件,将craco作为执行文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

配置craco.config.js文件

• 在项目根目录创建一个 craco.config.js 用于修改默认配置。

  /* craco.config.js */
  module.exports = {
    // ...
  };

  将js的根路径和你想要自定义的路径拼接起来

  const path = require("path")//导入path模块
  //定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
  const resolve = dir =>path.resolve(__dirname,dir)

  在module.exports中添加webpack相关配置

  module.exports = {
    webpack:{
      alias:{
      //名称:路径
        "@":resolve("src")
      }
    }
  };

  然后就成功了,这样就不不用使用inject命令也能自定义目录了