webpack模块解析

webpack 是通过Resolvers 实现了模块之间的依赖和引用，所引用的模块可以是应用程序的代码或者第三方库。resolver 帮助webpack 从每个require/import 语句来找到需要引入到bundle 中的模块代码。当打包模块的时候，webpack 使用enhanced-resolve 来解析文件路径。

enhanced-resolve 可以解析三种文件引用路径

1. 绝对路径

   import xxx from '/src/xxx.js'

2. 相对路径

   import xxx from './xxx.js'

3. 模块路径，关于模块路径，webpack会自动去node_modules文件夹下去找对应的模块

   import xxx from 'lodash'

对于相对路径来说，如果模块之间引用的层级太多，那么就有可能在写路径的时候写错，如何来解决这个问题？

import xxx from '../../../../xxx.js'

我们可以给某个目录文件的路径起一个别名

resolve: {
   extensions: ['.json', '.js', '.vue']
}

对于引入的模块如果不写扩展名，那么我们如何设置引入顺序？

resolve: {
   extensions: ['.json', '.js', '.vue']
}