在现代的 Web 开发领域中，Webpack 可谓是一款强大的工具。它可以让开发者使用模块化的方式来组织代码，并且可以自动化地进行代码压缩、打包等操作。而对于前端开发来说，jQuery 也同样是一款非常实用的工具。它可以让开发者更方便地操作 DOM，并且提供了许多实用的插件和组件。那么，如何在 Webpack 中优雅地使用 jQuery 呢？
使用 npm 安装 jQuery
最简单也是最常用的方法是使用 npm 安装 jQuery：
--- ------- ------ ------
上面的命令会将 jQuery 安装到你的项目中，并且在 package.json 的 dependencies 中添加一条记录。
在 Webpack 中引入 jQuery
接下来，我们需要在 Webpack 中引入 jQuery。有两种方式：
1. 使用 ProvidePlugin 插件
ProvidePlugin 是 Webpack 自带的插件，它可以自动加载模块，避免每个模块中重复引入模块的问题。我们可以在 Webpack 的配置文件中添加以下内容：
-------- -
--- -----------------------
-- ---------
------- --------
--
-上述代码中，我们通过 ProvidePlugin 插件将 $ 和 jQuery 注入到每个模块中。这样，在每个模块中就可以直接使用 $ 和 jQuery 了。
2. 使用 import 导入模块
另外一种方式是使用 import 导入模块：
------ - ---- ---------
在这种方式中，我们需要手动导入 jquery 模块，并且指定一个变量名（这里使用了 $）。
在 HTML 中引入 jQuery
在 Webpack 配置好 jQuery 后，我们还需要在 HTML 中引入它。最简单的方式是采用 CDN 引入的方式：
------- ------------------------------------------------------------------
当然，如果你不想使用 CDN，也可以将 jQuery 下载到本地并在 HTML 中引用：
------- -------------------------------
使用 jQuery 插件
如果你需要使用一些 jQuery 插件，那么在 Webpack 中使用它们也是非常简单的。以 lightbox2 插件为例，我们可以像这样引入它：
------ ------------ ---------------------------- - --------------------------- ---
上述代码中，我们首先使用 import 导入了 lightbox2，然后在 ready 函数中使用它。
总结
通过本文，我们可以看出在 Webpack 中优雅地使用 jQuery 是非常简单并且实用的。通过 npm 安装 jQuery，然后使用 ProvidePlugin 或 import 导入模块并在 HTML 中引入 jQuery，就可以轻松地使用它了。非常推荐开发者去尝试一下！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646c9805968c7c53b0b8d26a