前端项目引用本地资源别再傻傻写相对路径../../../../了

问题背景：

记录一次 code review 时同事给我的评论，顺便整理下涉及的知识点。

我在项目的 src/common/images 文件夹中新增了一个图片资源 pic_recommend.png，在多个文件中都引用了这个图片资源。我使用了相对路径的写法，看起来代码很冗余，且多层 …/ 写着麻烦，不易维护。

其实我在写这些相对路径的时候，没有路径自动补全，写的时候就觉得这个过程太傻了，很容易出错……

---

问题描述

相对路径因为有多层 …/，所以写起来很容易出错。同事评论我可以把引用路径改成 ~@common/images/pic_recommend.png。

---

思考：

为什么可以写成 ~@common/images/pic_recommend.png 呢？
～ 代表什么？
@common 又是什么？

---

相关知识：

webpack配置

经过我的“观察”👀，知道了为什么可以这样做，原来是可以在项目的 webpack 配置里写 alias 。

// webpack.config.js
const path = require('path');

module.exports = () => {
	// 省略其他配置
	resolve: {
		// extensions字段指定了加载模块时可以省略的文件名后缀
		extensions: ['.ts', '.jsx', '.scss', '.css'],
		modules: ['node_modules', path.resolve(__dirname, 'src')],
		alias: {
			'@common': path.resolve(__dirname, 'src/common'),
		}
	}
	// 省略其他配置
}

至于～，注意不要和 linux 命令里的～混淆。这里的～是在告诉webpack接下来要加载一个模块，其实可以省略不写～，直接写 @common 也可以。linux 命令里的～代表的是当前登录用户所在的文件夹目录。

终于明白了为什么 mac 电脑终端打开时显示～，其实你就是当前用户的目录。

比如我的当前目录是 /Users/cuishuang，其中 pwd 命令可以展示当前的工作目录。

事已至此，彻底弄清楚原因了。