webpack resolve
时间: 2023-11-28 08:40:38 浏览: 45
webpack resolve 是用来配置模块解析的选项,可以指定模块的查找位置和后缀名等信息。
resolve 中常用的选项有:
1. alias:配置模块别名,可以简化模块的引用路径。
2. extensions:配置模块的后缀名,当引用模块时没有指定后缀名时,会按照指定的后缀名依次查找文件。
3. modules:配置 webpack 在哪些目录下查找第三方模块,默认只会在 node_modules 目录下查找。
例如,以下是一个简单的 resolve 配置:
```javascript
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
extensions: ['.js', '.json'],
modules: ['node_modules', 'src']
}
```
相关问题
webpack中的resolve.alias
Webpack 中的 resolve.alias 是什么功能?
resolve.alias 是 Webpack 中的模块解析配置项之一,允许你配置模块的别名,可以方便的进行模块导入。通过设置别名,Webpack 在寻找模块时可以直接使用别名来代替模块路径,减少了模块寻找的过程,同时方便代码维护。示例代码如下:
```
// webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'vue': 'vue/dist/vue.esm.js'
}
}
};
```
在上面的配置中,我们为 `src` 目录设置了别名 `@`,而且为 Vue.js 设置了别名,指向 Vue.js 的 esm.js 版本。这样,在你的代码中,你就可以这样来使用模块:
```
import MyComponent from '@/components/MyComponent.vue';
import Vue from 'vue';
```
这样可以使代码更加简洁、优雅。
configwebpack
`configureWebpack`是Vue CLI中的一个配置项,用于配置webpack插件。它有两种形式,一种是对象形式,一种是函数的形式,并且都对生产环境和开发环境做了判断。在对象形式中,我们可以直接设置webpack的配置项,如设置别名、压缩代码等。在函数形式中,我们可以通过传入一个config对象来修改webpack的配置,如设置别名、压缩代码等。同时,我们也可以根据不同的环境来设置不同的配置,如只在生产环境中压缩代码等。
下面是一个示例代码:
```javascript
module.exports = {
// 对象形式配置configureWebpack
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
plugins: [
new UglifyPlugin(),
new CompressionPlugin()
]
},
// 函数形式配置configureWebpack
configureWebpack: config => {
config.name = 'xxx'
config.resolve = {
...config.resolve,
alias: {
'@': path.resolve(__dirname, 'src')
}
}
if (process.env.NODE_ENV === 'production') {
const plugins = [
new UglifyPlugin(),
new CompressionPlugin()
]
config.plugins.push(...plugins)
}
}
}
```