Webpack 是一款强大的前端打包工具，它可以将多种文件（如 JS、CSS、图片等）打包成一个或多个可执行的文件，优化前端项目的加载速度和开发效率。Webpack 同时支持模块化开发，可以将多个 JavaScript 文件打包成一个文件。
当我们需要引入第三方 JS 库时，我们可以通过以下几种方法将它们打包进我们的项目中：
Method 1: script 标签引入
我们可以在 HTML 页面中使用 script 标签引入第三方 JS 库，这种方式最简单但不推荐使用，因为它没有处理依赖关系。
--------- -----
------
------
----- ----------------
-------------- ----- -- ------------
-------
------
------- -----------------------------------------------------------------------
------- ---------------------------------------------------------------------------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ -----
-
---
---------
-------
-------Method 2: 使用 import 引入
在使用原生 JS 开发时，我们可以通过 import 语法来引入第三方 JS 库。但在浏览器中直接使用 import 语法并不被所有浏览器支持。在使用 Webpack 时，我们可以使用 babel-loader 来转换这种语法。
------ --- ---- ------
------ ----- ---- --------
--- --- - --- -----
--- -------
----- -
-------- ------ -----
-
---使用 import 语法引入第三方库时，Webpack 会分析库的依赖关系，将相关的文件打包成一个或多个可执行的文件。
Method 3: 使用 ProvidePlugin 插件
通过使用 ProvidePlugin 插件，我们可以在 Webpack 编译时自动加载某些模块，使它们在所有模块中都可用，而无需引入它们。这种方式可以避免在每个文件中都引入第三方库。
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- -----------------------
---- ----------------------
------ -------
--
-
--这里的 Vue 模块需要使用 webpack.ProvidePlugin 插件中的参数进行调用，axios 模块就不需要了。
Method 4: 使用 CDNs 引入
当我们需要引入的第三方库比较大时，使用 CDN 可以有效地减少文件大小，提高项目的加载速度。不过，使用 CDN 也可能存在一些风险，如 CDN 故障、漏洞等。
--------- -----
------
------
----- ----------------
-------------- ----- -- ------------
-------
------
------- -----------------------------------------------------------------------
------- ---------------------------------------------------------------------------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ -----
-
---
---------
-------
-------总结：
以上四种方法都可以实现在 Webpack 中引入第三方 JS 库。但是，我们推荐使用 import 引入或使用 ProvidePlugin 插件这种方式，因为它们可以更好地处理依赖关系，并且便于我们管理和维护代码。
参考：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652bc5ca7d4982a6ebda2f43