首先，小编声明，本项目是使用webpack4进行打包，关于本项目的配置都是基于webpack4集成的，对于低版本的webpack，仅供参考。
什么是alias？
webpack官方解释：更轻松地创建别名import或require某些模块。
常用：为一堆常用src/文件夹添加别名。
为什么要取别名呢？
举个例子，NBA有一个球星叫Giannis Antetokounmpo，翻译成中文叫扬尼斯·安特托昆博，他还有一个更简易的名字 - 字母哥。是不是更简单，更顺口呢！
回到正题，当我们编写代码时，import Utility from '../../utilities/utility';直接让人崩溃。引入alias，是为了让后续引用的地方减少路径的操作，化繁为简。
alias的默认配置
// build/webpack.base.conf.js 36～39行
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}在vue项目中，vue-cli脚手架生成项目模板时，默认配置@为项目根目录下放资源和源码的src目录的别名。而我们也在无时无刻的使用它，可能我们自己都不注意
improt Layout from @/component/layout
这段代码是不是很眼熟，没错，这就是引用的/src/compoent/layout/index.vue。我们在任何地方引用，webpack都可以识别，这多亏了alias。
css引用
CSS loader会把非根路径的URL解释为相对路径，加～前缀才会解释为模块路径。因此，在使用时加～，告诉加载器这是一个模块，而不是一个相对路径。简单的说：～视为模式解析是webpack的事情，而不是css-loader的事情
注：不使用～，实验也是可以成功的。但是issue提出的方案是在@前面加上~。因此，小编推荐加～
js引用
JS使用时，不需要加～
只有在template中的静态文件和style中的静态文件地址需要加～，在script中，直接使用定义的别名