24-打包第三方库

其实引用第三方库的方法有很多种，很多时候能够配置，同时开发环境下也能用，但是最后总是会出现这样那样的问题，还有些方法会出现打包问题， 在这里介绍一下JQuery为例

安装JQuery

npm install jquery --S

安装时需要注意的时Jquery最终要在生产环境中使用，所以我们这里要使用–save进行安装。

方法一

修改entry.js文件

安装好后，还需要引入到我们的entry.js中，这里直接使用import进行引入就可以。 这里引入是不需要我们写相对路径的，因为jquery的包是在node_modules里的，只要写一个包名jquery，系统会自动为我们查找的。

import $ from "jquery";
$("body").innerHTML = "I am jquery";

可以看到上面是标准的jquery代码，你可以使用npm run server 进行测试，现在代码顺利运行了， 这说明我们引用的JQuery库成功了。需要说的是你不仅可以在入口中进行引入，你还可以在任何你需要的js中引入，webpack并不会重复打包，它只给我们打包一次。

方法二

用plugin引入 如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负责了一下打包，这样并没有全局感。那再学习一种在webapck.config.js中配置的方法，这种不需要你在入口文件中引入，而是webpack给你作了全局引入。这个插件就是ProvidePlugin。

ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。

const webpack = require("webpack");

在webpack.config.js里引入必须使用require，否则会报错。

引入成功后配置plugins模块，代码如下。

module.exports = {
    plugins: [
        new webpack.ProviderPlugin({
            $: "jquery"
        })
    ]
}

配置好后，就可以在你的入口文件中使用了，而不用再次引入了。这是一种全局的引入，在实际工作中也可以很好的规范项目所使用的第三方库。

总结

每一个项目都可能引入第三方类库，而像Vue和Angular这样的成熟框架都推出了自己的webpack框架，比如vue-cli。但是很多情况还是需要我们手动更改这些配置好的webpack来适用于我们的公司项目