首页 > 建站教程 > 前端框架 >  webpack5学习笔记:resolve 用于设置模块如何被解析正文

webpack5学习笔记:resolve 用于设置模块如何被解析

# 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')

    ]

}

```