resolve
是webpack的配置项中一个比较重要的属性,主要用来配置模块如何解析。
例如在ES2015中调用import 'lodash'
,resolve
能够对webpack查找lodash的方式进行修改
resolve.alias
创建import
或者require
的别名,来确保模块引入更简单,最常见的就是用@
来代替scr
目录:
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
}
在给定对象的键后面添加$
,表示精确匹配,例如:
import Vue from 'vue'; // 精确匹配,所以 path/to/file.js 被解析和导入
import Vue2 from 'vue/file.js'; // 非精确匹配,触发普通解析
当我们使用的一个包的名称和NPM安装的包有出入的时候,也可以通过alias
字段来指定:
resolve: {
alias: {
'socket.io': path.resolve(__dirname, 'node_modules/socket.io-client')
}
},
resolve.aliasFields
指定一个字段,例如browser
,根据此规范进行解析。默认:
aliasFields: ["browser"]
resolve.extensions
自动解析确定的扩展。默认值为:
extensions: [".js", ".json"]
能够使用户在引入模块时不带扩展:
import File from '../path/to/file'
更多的配置项参考官方文档。