在项目当中,我们可能正在大量使用相对路径,但是相对路径存在一个明显的问题:当文件目录发生变化时,需要频频修改相对路径。一个比较常见的情形是:在React开发中,我们经常需要导入组件,而组件一般都是放在components
目录下。组件的位置一般不会改变,但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径,则需要对导入路径进行修改;而如果使用绝对路径,不管当前文件放到哪里都可以正确导入组件。
配置webpack根目录
由于我们的源代码都放在src
目录下,因此将其设为根路径比较合适。设置方法为在webpack.config.js
的resolve
节点下新增alias
别名:
alias: {
"@": path.join(__dirname, "./src")
}
这样,我们在导入组件的时候就可以类似写成:import Hello from "@/components/Hello"
。不管当前文件在哪都可以正确导入组件。