webpack4-引入第三方库

方法一：直接引入

直接引入相当简单，直接下载插件，然后在要用的页面的js文件中 import 就行了，其他任何配置都不需要，JQ的全局变量有多个的，通常我们通过import方式是这样的：

通过import方式是这样的：

import $ form 'jquery';

修改我们的配置：

先注释掉webpack.dev.conf.js文件中关于expose-loader的配置；
修改src/index.js文件中jquery的引入方法，先注释掉require('jquery'); 添加import $ from 'jquery';;
先注释掉src/index.js文件中引入的require('./assets/js/jquery.SuperSlide.2.1.1.js');以及使用的方法jQuery(".slideTxtBox").slide();;
运行yarn start 页面能正常打开，而且jquery的代码也能正常执行，说明没有问题;

那么现在我们放开上面第三条注释，再次运行yarn start;

坏了，jquery的代码也不能正常执行了，打开控制台可以看到jQuery is not defind，emmm，有人会说把jQuery改成$，放在jquery代码中就行了啊，可以试一试，我们修改src/index.js文件中jquery相关代码如下：

$(function(){
    $("#postcss").html(strHtml);
    $(".slideTxtBox").slide();
});
//jQuery(".slideTxtBox").slide();

再次执行yarn start 会发现依然提示jQuery is not defind，这是SuperSlide这个插件的代码内是有使用jQuery这个全局变量，修改我们自己用到的并没有什么卵用~

方法二：ProvidePlugin

webpack 官方的说法是自动加载模块，而不用到处import或者require。

而且在官方文档下面说到使用Angular和jquery时，有写这么一句话：Angular 会寻找 window.jQuery 来决定 jQuery 是否存在，这也印证了第一种方法的不可取之处~，现在我们跟随官方文档的步伐来配置我们的jquery, 官方教程

1. 首先就是不用到处import或者require，先注释掉import $ from 'jquery';;
2. 再注释掉SuperSlide的引用和使用，先确保jquery的配置正确及正常使用;
3. 修改webpack.dev.conf.js文件，在plugin中添加如下代码：

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

执行yarn start 页面一切显示正常，都很好，然后我们放开引用SuperSlide的注释，注意修改回使用jQuery

$(function(){
    $("#postcss").html(strHtml);
});
jQuery(".slideTxtBox").slide();

但是这个也不是完美的方法，本人未做过亲测，但是在网上确实看到一些文章说到，该方法对一些第三方库的插件的支持度不高，容易报错，比如jquery-ui，而且如果配置了eslint，这种没有显性声明全局变量的方法，在eslint规则中是不严谨的，难以通过eslint的语法校验。

方法三：externals

上面说到的两种方法，包括前文说到的expose-loader方法，都有一个问题，那就是在项目完成后打包生产环境时，这些项目依赖的包，都会被打包，当我们的项目很大，依赖了很多第三方库是，就会出现打包文件过大的问题

webpack官方提供了externals方法，来让一些我们不想被打包的文件过滤出来，并通过CDN的方式，直接在html文件中引用这些文件。

externals: {
    jquery: 'jQuery'
},

修改 src/index.js文件，取消import $ form 'jquery'的注释；
修改 src/index.html 文件，在body底部添加如下代码：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>

• 区别就在于，在打包生产环境时，该方法打包时不会打包externals中配置的插件，这无疑加快了打包速度，也减少了打包后的文件体积，但是它和方法一有同样的问题存在

方法四：expose-loader

• 引入第三方插件库
• 解决第三方库的插件依赖

npm i 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');