# 使用 webpack 处理第三方库

# 如何使用和管理第三方JS库

项目做大之后，开发者会更多专注在业务逻辑上，其他方面则尽力使用第三方JS库来实现。由于 js 变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中：

• CDN：<script> 标签引入即可

• npm 包管理： 目前最常用和最推荐的方法

• 本地js文件：一些库由于历史原因，没有提供es6版本，需要手动下载，放入项目目录中，再手动引入。

针对第一种和第二种方法，各有优劣，这里暂且不谈。针对第三种方法，如果没有 webpack，则需要手动引入 import 或者 require 来加载文件；但是，webpack 提供了 alias 的配置，配合 webpack.ProvidePlugin 这款插件，可以跳过手动入，直接使用！

# 编写配置

首先，我们下载 jquery.min.js，放到了项目中。同时，我们也通过npm安装了jquery。

然后，编写入口文件 app.js，如下所示：

$("div").addClass("new");

jQuery("div").addClass("old");

接下来编写 webpack 配置文件，如下所示：

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文件
    })
  ]
};

webpack.ProvidePlugin 参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。

webpack.ProvidePlugin 会先从 npm 安装的包中查找是否有符合的库。如果 webpack 配置了 resolve.alias 选项（理解成“别名”），那么webpack.ProvidePlugin 就会顺着这条链一直找下去。

最后，命令行运行 webpack 进行项目打包，在 Chrome 中打开 index.html。我们可以看到在 app.js 中使用的 $ 和 jQuery 都成功指向了 jquery 库。