React 使用@引入

最新推荐文章于 2024-11-07 14:47:48 发布

绥兮

最新推荐文章于 2024-11-07 14:47:48 发布

阅读量1.6k

点赞数

分类专栏： # react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/SEA_mihu/article/details/120861915

版权

react 专栏收录该内容

1 篇文章

订阅专栏

@引入就是绝对路径引入图片，会比相对路径引入更方便一点。然而区别于Vue中有webpack配置可以直接使用，在react中，需要设置webpack的别名才可以使用。

使用eject命令

使用 CRA 创建完项目以后，项目在package.json里面提供了这样一个命令：

{
    ...
    "scripts": {
    "eject": "react-scripts eject"
    },
    ...
}

执行完这个命令——npm run eject后会将封装在 CRA 中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。

# eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置
config
├── env.js
├── jest
│   ├── cssTransform.js
│   └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js

但是要注意，eject是个不可逆的命令，如果我们使用了eject命令，就再也享受不到 CRA 升级带来的好处了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

使用react-app-rewired

在 CRA 创建的项目中安装了react-app-rewired后，可以通过创建一个config-overrides.js文件来对 webpack 配置进行扩展。

/* config-overrides.js */
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    return config;
}

Module not found: Can't resolve '@/XXX/img.jpg' 错误的原因和解决方案

把正常能运行的项目打包发给别人后发现报了这个的错误，但是npm安装过程中没有报错，重开了一个文件目录安装也是一样的情况。

报错的意思就是没有配置@为别名，这种情况的产生就是修改了node_modules中的react-scripts中的webpack配置。（react-scripts/config目录中）npm安装的默认配置没有配置别名，所以报错。

采用以上任意一种方法即可解决，非常不建议修改node_modules

参考文章：React 知识汲取篇 —— react-app-rewired && config-overrides.js配置_风华流沙君莫笑的博客-优快云博客_config-overrides.js

如何扩展 Create React App 的 Webpack 配置_wyd1022的博客-优快云博客