webpack4配置之——19：引入第三方插件库

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kai_vin/article/details/88722672

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

引入npm包管理的第三方插件库

对于第三方插件库，用到最多的莫过于jquery了~，就先以jquery为例，因为是要全局使用，所以需要将其暴露给全局，网上有很多种配置方法，但是觉得最靠谱的应该就是接下来要介绍的这种，需要使用到expose-loader：

yarn add jquery -S
yarn add expose-loader -D

首先修改webpack.dev.conf.js文件，在rule中添加如下代码：

{
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: 'jQuery'
    },{
        loader: 'expose-loader',
        options: '$'
    }]
}

然后只需要在你的js文件中导入jquery即可：

require('jquery');

就是这么简单就可以随心所欲的使用jquery了~

那么这是对可以通过包管理下载的第三方库，如果是包管理没有的第三方库，直接引入就行只是会有些注意的地方

引入非npm模块的第三方插件库

在很多网页上需要用到一些特效，如果不去使用那些集成的Ui库的话，需要自己去找那些有丰富特效的第三方插件，我最常用到的一个就是大话主席的SuperSlide第三方插件库。而这个是不能通过npm下载的，需要网上找资源下载到本地，并放到自己的项目中。

这种插件的引用需要注意点：

1. 直接在入口js文件中引入就行，但是只能通过require引入，而不能通过import引入，至于为什么，我也不知道，import引入，浏览器会报错undefind

require('./assets/js/jquery.SuperSlide.2.1.1.js');

2. 引入后，如果直接就yarn start 会报错，因为缺少core-js，所以还需要下载该插件

yarn add core-js =-D

3. 该插件库是依赖于jquery的，所以其引入必须放在jquery的引入下方，才会生效
4. 该插件库只支持到jquery的2.x版本，所以如果要用到该插件，则只能下载2.x版本的jquery