reslove位于webpack.config 的一个对象， 是用于解析 css\js\json 等等文件的配置项
如下走一遍 bootstrap 的安装使用流程：
安装 boorstrap 和相关 依赖
1- yarn add bootstrap jquery popper.js -D 后两个是 bootstrap 的依赖
2 - 在index.js或者其他相关js文件，import 'bootstrap'; 导入安装后的包
3 - 建立webpack.config.js和bootstrap包的联系，此处一共有 三种方法
先把代码和包内结构贴出来:
resolve:{
modules:[path.resolve('node_modules')], //解析第三方包 common
alias:{ //这是第一种方法 设置别名
bootstrap:'bootstrap/dist/css/bootstrap.css'
},
extensions:['.js','.css','.json'], //文件 依次解析的后缀方式
mainFields:['style','main'], // 第二种方法 从bootstrap 的 json 文件按照编排顺序 依次解析文件
// mainFiles:['index.js'] //入口文件的名字 第三种方法不好用 略过
}
mainFields.jpg
一.指定路径读取法
1 - 在index.js 或者其他名称的 js 文件顶部引入 import 'bootstrap';
2 - 设置aliass:{ } 别名，在reslove{} 中加入 alias:{ } 在对象中写好冗长的 文件路径，就可以识别 bootstrap 语句了
一.设置文件读取顺序法：
1 - 在index.js 或者其他名称的 js 文件顶部引入 import 'bootstrap';
2 - config.js在bootstrap的文件夹的package.json 默认读取的是 js 文件，所以在未手动设置mainFields 就无法识别 bootstrap 的原因就是如此，需要更改读默认取顺序。
代码如下：
mainFields:['style','main'], // 从bootstrap 的 json 文件按照编排顺序 匹配文件
.
【额外】:介绍下`` reslove { } 中的 extensions
resolve:{ //解析第三方包 common
modules:[path.resolve('node_modules')],
extensions:['.js','.css','.json'],
mainFields:['style','main'], // 从bootstrap 的 json 文件按照编排顺序 匹配文件
}
关于解析 import 文件时 默认都是 js 文件，否则需要带 .css .json 等后缀，配置extensions 可以依次添加后缀寻找
