configureWebpack中resolve
时间: 2024-02-05 20:47:04 浏览: 31
配置文件中的 resolve 字段用于配置模块解析的规则。它通常用于设置模块的搜索路径、别名和扩展名等。
要配置 resolve,将其添加到 webpack 配置文件中的 configureWebpack 字段中。示例代码如下:
```javascript
module.exports = {
// 其他配置项...
configureWebpack: {
resolve: {
// 设置模块搜索路径
modules: ['node_modules', 'src'],
// 设置模块别名
alias: {
'@': path.resolve(__dirname, 'src'),
'vue$': 'vue/dist/vue.esm.js'
},
// 设置模块的扩展名
extensions: ['.js', '.vue', '.json']
}
}
};
```
上述示例中的配置项包括:
- modules:指定了模块搜索的路径,可以是绝对路径或相对路径。当前示例中将先从 node_modules 中查找模块,如果找不到再从 src 目录中查找。
- alias:设置模块的别名,可用于简化模块的引用路径。例如,使用 '@' 来表示项目根目录下的 'src' 目录。
- extensions:指定模块的扩展名,在引用模块时可以省略扩展名。例如,使用 'import App from './App'`,而不是 'import App from './App.vue`。
通过配置 resolve,可以简化模块引用的路径,并且提升构建速度和开发效率。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)