8-reslove解析bootstrap第三方包方法

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 可以依次添加后缀寻找