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

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_02

 

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

希望对你有所帮助