需求:当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用 alias 了。 有的人喜欢alias 指向src目录下,也可以设置搜索的模块后缀名,再使用相对路径找文件;
作用:
设置别名可以让后续引用的地方减少路径的复杂度
1. 项目结构
- src
- utils
- index.js
- config
- config.js
- main.js
- webpack.config.js
2. webpack.config.js
const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
resolve: {
alias: {
'@': resolve('src'), //配置src目录的别名
'_c': resolve('src/components') //配置公共组件目录的别名
}
}
}
3. 使用
因为设置了alias,所以引入utils.js时候可以这样简写
import utils math from "@/utils/index.js";