react中配置webpack,支持@符号导入模块

执行eject

在项目中执行 $ npm run eject 这个命令只能执行一次,而且不可逆转,它会把react-scripts 封装的一些webpack配置等全部解压到项目目录,项目结构中会多出 config 目录 和 scripts 目录,我们的需要配置的地方就在config 目录中, 其中有两个文件需要需改:webpack.config.dev.js 和 webpack.config.prod.js 文件,两个文件都是修改的同一处配置。

修改配置,添加alias别名

webpack.config.dev.js 和 webpack.config.prod.js 文件中搜索 alias 关键词,在相关对象中添加一个键值对:'@': paths.appSrc,此时的appSrc 就是项目的src目录

由于技术栈时时升级,为了防止技术升级造成的无法匹配问题的现象,在此添加版本信息如下:

"devDependencies": {
  "react-scripts": "^1.1.4"
},
"dependencies": {
   "react": "^16.3.2"
}

此时的版本下执行 $ npm run eject 再修改上面的配置是没有任何问题的

修改导入文件的写法

好了,现在我们想要导入 src/pages/home/index.js 只需要把import的路径写成 @/pages/home 就可以了,或者也可以按照相对路径的写法导入,其中这里要说明的一些情况是如果目录中存在index.js可以直接写成目录名称,不需要写全路径,因为如果访问某一目录,它默认找的就是index.js, 就像是上面的写法,我们可以写成 @/pages/home 的形式,也可以写成 @/pages/home/index.js 的形式

最后总结

修改完毕,这样以后导入模块就方便多了!

猜你喜欢

转载自blog.csdn.net/qq_40963664/article/details/81120473