配置 webpack 设置根目录|学习笔记

开发者学堂课程【React 入门与实战：配置 webpack 设置根目录】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/585/detail/8092

配置 webpack 设置根目录

一、方法

通过 vue-cli 创建项目时，它会导入自己的组件。在导入组件时，代码给出了路径。

import Hello from '@/compements/Hello’

其中，@ 符号表示项目根目录中的 src 这一层目录。通过如下方法可以把 @ 和根目录中的 src 对应起来：

在 webpack 的 resolve 节点下，与 extensions 平级，书写

alias：

Resolve: {

'@'：path.join(__dirname，’./src')

这样 @ 这个符号，就表示项目根目录中 src 的这一层路径，这样拼接得到的路径是绝对路径。

其中，alias: {//表示别名

如果不配置 @ 符号，用“.“也可以。

import Hello from './components/Hello'