React 项目--设置根目录（8）

在上一篇的博客中，我们介绍了如何将组件单独的拉出来存放到一个单独的文件中。那么我们在项目中如果要使用这个组件需要导入这个组件，我们之前是这样完成的

import Hello from './components/Hello'

我们可以看到导入的时候我们使用的是相对的路径 ./ ，这个是相对于 index.js 文件的路径

那么我们不仅的想能否设置项目的根路径，应该如何设置

在wenpack.config.js 文件中：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //导入，在内存中自动生成 index 页面
const htmlPlugin=new HtmlWebpackPlugin({template:path.join(__dirname,'./src/index.html'),filename:'index.html'
});
module.exports={mode:'development',plugins:[htmlPlugin],module:{rules:[{test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}]},resolve:{extensions:[".js",".jsx",".json"],alias:{'@':path.join(__dirname,'./src')  //这样我们在项目中就可以使用@ 符号作为项目的根路径了}}
}

关键是这个配置：

alias:{
'@':path.join(__dirname,'./src')
}

这样当项目中遇到了 ‘@’ 这个符号时候就会解析成为项目的根目录

此时我们index.js 导入项目的时候，就可以修改为：

import Hello from '@/components/Hello';

然后我们重启项目：

上面便是配置了项目的根路径

希望对你有所帮助

React 项目--设置根目录（8）相关推荐

React项目 --ES6 语法中的class （9）
上一篇的博客中我们介绍了,如何设置React项目的根目录连接地址:https://blog.csdn.net/datouniao1/article/details/119505562 要学习Reac ...
React项目中如何结合antd引入阿里图标（外联方式）
在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库? 一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地二.1.在React项目的根目录下创建一个stati ...
react前端项目_如何使用React前端设置Ruby on Rails项目
react前端项目 The author selected the Electronic Frontier Foundation to receive a donation as part of th ...
react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
react 图片放在src里面还是public_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
react打包后图片丢失_手写Webpack从0编译Vue/React项目
当前前端开发,90%的项目都是Vue和React,然而70%的同学都基于脚手架创建项目,因为脚手架会包含项目基本框架.webpack配置.scss/sass/less解析.babel配置.DevSer ...
nginx location匹配除了一个路径_nginx部署React项目
nignx是一款非常优秀的服务器软件,前端工程师在开发完项目后,通常要将项目部署到服务器,我在部署项目时用的就是nginx.今天跟大家分享一下用nginx部署前端项目的一些经验.React项目开发完成 ...
二手前端入门React项目
个人对ReactJS这门技术比较感兴趣,在基友的帮助下成功创建了一个React标准前端工程,过程中遇到了不少麻烦,今天作为笔记一般记录一下遇到的问题和解决方案. 基础环境手头一台Mac 使用OSX系 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...

React 项目--设置根目录（8）

React 项目--设置根目录（8）相关推荐

最新文章

热门文章