webpack4 系列教程(十二)：处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十二)：处理第三方 javascript 库》原文地址。或者来我的小站看更多内容：
0. 课程介绍和资料
本节课的代码目录如下：
本节课的package.json内容如下：
{
"dependencies": {
"jquery": "^3.3.1"
},
"devdependencies": {
"webpack": "^4.16.1"
}
}
1. 如何使用和管理第三方js库？
项目做大之后，开发者会更多专注在业务逻辑上，其他方面则尽力使用第三方js库来实现。
由于js变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中：
- cdn：
<script></script>标签引入即可 - npm 包管理： 目前最常用和最推荐的方法
- 本地
js文件：一些库由于历史原因，没有提供es6版本，需要手动下载，放入项目目录中，再手动引入。
针对第一种和第二种方法，各有优劣，有兴趣可以看这篇：《cdn 使用心得：加速双刃剑》
针对第三种方法，如果没有webpack，则需要手动引入import或者require来加载文件；但是，webpack提供了alias的配置，配合webpack.provideplugin这款插件，可以跳过手动入，直接使用！
2. 编写入口文件
如项目目录图片所展示的，我们下载了jquery.min.js，放到了项目中。同时，我们也通过npm安装了jquery。
为了尽可能模仿生产环境，app.js中使用了$来调用 jq，还使用了jquery来调用 jq。
因为正式项目中，由于需要的依赖过多，挂载到window对象的库，很容易发生命名冲突问题。此时，就需要重命名库。例如：$就被换成了jquery。
// app.js
$("div").addclass("new");
jquery("div").addclass("old");
// 运行webpack后
// 浏览器打开 index.html, 查看 div 标签的 class
3. 编写配置文件
webpack.provideplugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。
webpack.provideplugin会先从npm安装的包中查找是否有符合的库。
如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.provideplugin就会顺着这条链一直找下去。
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicpath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkfilename: "[name].chunk.js"
},
resolve: {
alias: {
jquery$: path.resolve(__dirname, "src/vendor/jquery.min.js")
}
},
plugins: [
new webpack.provideplugin({
$: "jquery", // npm
jquery: "jquery" // 本地js文件
})
]
};
4. 结果分析和验证
老规矩，根绝上面配置，先编写一下index.html：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> </head> <body> <div></div> <script src="./dist/app.bundle.js"></script> </body> </html>
命令行运行webpack进行项目打包：
在 chrome 中打开index.html。如下图所示，<div>标签已经被添加上了old和new两个样式类。证明在app.js中使用的$和jquery都成功指向了jquery库。