在线等！webpack的resolve.modules和 resolve.alias有什么区别?求解答！

Question

resolve.modules和resolve.alias都可以缩短路径的写法，但是两者有什么区别呢？

Answer 1

resolve.modules是用来设置模块搜索的目录，设定目录以后，import模块路径，就可以从一个子目录开始写，这样就可以缩短模块引入路径。例如：
resolve:{
modules:['./src/components']
}
则引入src下的components下的utils模块，就可以
import'utils'
这样就可以省略前面的src/components路径，作用是省略路径书写，让webpack自己查找
而resolve.alias则是给路径设置别名，作用是用别名代替前面的路径，不是省略，而是用别名代替前面的长路径。这样其实有个好处，就是webpack直接会去别名对应的目录去查找模块，减少了webpack自己去按目录查找模块的时间。例如:
resolve：{
alias:{
'com':'./src/components'
}
}
引入utils模块，就可以这样写
import'com/utils'
也达到了缩短引入路径的目的，写法与resolve.modules略有不同。