配置webpack设置根目录

在项目当中，我们可能正在大量使用相对路径，但是相对路径存在一个明显的问题：当文件目录发生变化时，需要频频修改相对路径。一个比较常见的情形是：在React开发中，我们经常需要导入组件，而组件一般都是放在components目录下。组件的位置一般不会改变，但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径，则需要对导入路径进行修改；而如果使用绝对路径，不管当前文件放到哪里都可以正确导入组件。

配置webpack根目录

由于我们的源代码都放在src目录下，因此将其设为根路径比较合适。设置方法为在webpack.config.js的resolve节点下新增alias别名：

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

这样，我们在导入组件的时候就可以类似写成：import Hello from "@/components/Hello"。不管当前文件在哪都可以正确导入组件。