# resolve 用于设置模块如何被解析
1. 在开发中,会有各种模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库
2. resolve可以帮助webpack从每个 require/import 语句中,找到需要引入的合适的模块代码
3. webpack 使用 enhanced-resolve 来解析文件路径
## webpack 能解析三种路径:
1. 绝对路径
2. 相对路径
3. node_modules 模块路径
## 确定加载的时文件还是文件夹
# resolve.extensions
1. 它是解析到文件时,自动添加的扩展名
2. 默认值: ['.wasm', '.mjs', '.json', '.js']
3. 如果想省去.vue、.jsx等扩展名,需要手动配置
## webpack.config.js 中配置
```
module.exports = {
resolve: {
extensions: ['.vue', '.jsx', '.ts']
},
}
```
配置完之后,就可以省略这些后缀名而直接引入,如:`import App from './App'`
# resolve.alias 别名
1. 就是vue中常用的 '@/',当目录比较深时,配置这个很有用
## webpack.config.js 中配置
```
module.exports = {
resolve: {
extensions: ['.vue', '.jsx', '.ts']
},
alias: [
'@': path.resolve(__dirname, './src'),
'pages': path.resolve(__dirname, './src/pages')
]
}
```