webpack的resolve.modules和 resolve.alias有什么区别

webpack的resolve.modules和 resolve.alias有什么区别?

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略有不同。

modules的作用是告诉 webpack 解析模块时应该搜索的目录

alias 是用来创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块

两者还是有比较大的区别的,具体可以参考官方文档上的案例：
resolve.alias： https://webpack.docschina.org…
resolve.modules: https://webpack.docschina.org…

---

resolve.modules是告诉webpack它去哪里查找第三方包，相当于前缀

resolve.alias是配置别名，也可以缩短路径 ，相当于取了一个变量 在模块中import时候加在前面，也相当于前缀。