Webpack引入第三方库的三种常用方式

Webpack引入第三方库概述

在Webpack项目中引入第三方库，通常涉及以下三种主要场景：

1. 第一种方式是通过CDN（内容分发网络）引入；
2. 第二种方式是通过npm安装依赖包并在代码中引入；
3. 第三种情况是第三方JavaScript文件直接存在于本地项目中。

通过CDN引入

关于通过CDN引入的方法

这是最简单的一种引入方式。例如，若要引入高德地图，可以直接将相关脚本标签放置在index.html文件的底部。需要注意的是，这种方式与Webpack的配置无直接关联，因为Webpack的入口文件通常不包含该HTML文件。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

通过npm安装与ProvidePlugin插件

关于通过npm安装引入

通过npm install命令安装的包会存储在node_modules文件夹中。在开发时，可以直接在需要使用该库的文件顶部通过import或require语句进行引入。然而，如果多个模块化文件都需要使用同一个第三方库，逐个文件引入会显得非常繁琐。此时，可以利用Webpack提供的ProvidePlugin插件。该插件的作用是将第三方库注入到全局作用域中，从而避免在每个文件中重复编写引入语句。

以引入jQuery为例

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

配置后，即可在代码中直接使用$和jQuery变量，它们均指向jQuery库。需要特别注意的是，$和jQuery键名后面的值（即'jquery'）必须与npm install命令中安装的包名完全一致，否则Webpack将无法正确解析并找到该库。

本地JS文件的路径配置

关于本地JS库文件的引入

有时会遇到第三方JS文件直接存放在本地目录的情况。以jQuery为例，如果按照常规npm方式处理，由于文件不在node_modules中，Webpack会报错找不到该模块。

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

针对这种情况，可以通过Webpack配置中的resolve选项来解决。具体做法是为该库指定一个别名（alias），并明确配置其物理路径。

假设我们的jquery.js文件存放在项目的dist文件夹下

resolve:{
  alias: {
   $: path.resolve(__dirname, './dist/jquery.js'),
   jQuery: path.resolve(__dirname, './dist/jquery.js'),
  }
}

通过上述配置，Webpack即可正确解析并打包该本地JS文件。

使用imports-loader注入

关于通过loader引入

除了ProvidePlugin插件外，还可以使用imports-loader来完成第三方库的引入工作。

在配置中，通过test字段指定需要引入第三方库的目标文件，并通过options配置具体的库映射关系。打包后观察可以发现，生成的app.js文件大小会有所增加，因为库代码被直接注入到了bundle中。

module: {
    rules: [
      {
        test: path.resolve(__dirname, "./src/app.js"),
        use: "imports-loader"
        options:{
          $:'jquery'
        }
      }
    ]
  }

以上介绍了Webpack引入第三方库的几种常见方法，希望对您的开发工作有所帮助。