demo13源码地址
项目目录：
image.png

1.如何使用和管理第三方JS库？

**
项目做大了之后，开发者会更多专注在业务逻辑上，其他方面则尽力使用第三方JS库来实现。

由于js变化是在太快，所以出现了多种引入和管理第三库的方法，常用的3中：

  • CDN: 标签引入即可
  • npm包管理：目前最常用和最推荐的方法
  • 本地js文件：一些库由于历史原因，没有提供ES6版本，需要手动下载，放入项目目录中，在手动引用。

针对第三种方法，如果没有webpack，则需要手动import或者require来加载文件，但是webpack提供了alias的配置，配合webpack.ProvidePlugin这款插件，可以跳过手动入，直接使用！

2.编写入口文件

如项目目录图片所展示的，我们下载了jquery.min.js，放到了项目中。同时，我们也通过npm安装了jquery。
image.png
为了尽可能模仿生产环境，app.js中使用$来调用jq，还是用了jQuery来调用jq

因为正是项目中，由于需要的依赖过多，挂载到window对象的库，很容易发生命名冲突问题。此时，就需要重命名库。例如：$就被换成jQuery。
在app.js中进行修改

  1. // app.js
  2. $('div').addClass('new')
  4. jQuery('div').addClass('old')

1.编写配置文件
webpack.ProvidePlugin 参数是键值对形式，键就是我们项目中使用的变量名，值就是键所在的库。
webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库
如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着这条链一直找下去。

  1. const path = require('path')
  2. const webpack = require('webpack')
  4. const CleanWebpackPlugin = require('clean-webpack-plugin')
  5. const HtmlWebpackPlugin = require('html-webpack-plugin')
  7. module.exports = {
  8.   entry: {
  9.     app: './src/app.js'
  10.   },
  11.   output: {
  12.     publicPath: './', // js 引用的路径或者 CDN 地址
  13.     path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
  14.     filename: '[name].bundle.js', // 代码打包后的文件名
  15.     chunkFilename: '[name].js' // 代码拆分后的文件名
  16.   },
  17.   resolve: {
  18.     alias: {
  19.       jQuery$: path.resolve(__dirname, 'src/vendor/jquery.min.js')
  20.     }
  21.   },
  22.   plugins: [
  23.     new CleanWebpackPlugin(),
  24.     new HtmlWebpackPlugin({
  25.       // 打包输出HTML
  26.       title: '自动生成 HTML',
  27.       minify: {
  28.         // 压缩 HTML 文件
  29.         removeComments: true, // 移除 HTML 中的注释
  30.         collapseWhitespace: true, // 删除空白符与换行符
  31.         minifyCSS: true // 压缩内联 css
  32.       },
  33.       filename: 'index.html', // 生成后的文件名
  34.       template: 'index.html', // 根据此模版生成 HTML 文件
  35.       chunks: ['app'] // entry中的 app 入口才会被打包
  36.     }),
  37.     new webpack.ProvidePlugin({
  38.       $: 'jquery', // npm
  39.       jQuery: 'jQuery' // 本地Js文件
  40.     })
  41.   ]
  42. }

修改index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>处理第三方 js 库</title>
  8.   </head>
  9.   <body>
  10.     <div></div>
  11.   </body>
  12. </html>

打包并在Chrome中打开index.html。如下图所示，

标签已经被添加上了old和new两个样式类。证明在app.js中使用的$和jQuery都指向了jquery库。
image.png