在前端开发中，jQuery 是一个非常常用的 JavaScript 库。在 Webpack 中引入并全局可用，可以让我们更方便地在项目中使用它。接下来，本篇文章将详细介绍如何在 Webpack 中引入 jQuery 并使其全局可用。
1. 安装 jQuery
首先，我们需要安装 jQuery。可以通过以下命令来安装：
--- ------- ------ ------
2. 配置 Webpack
在 Webpack 中使用 jQuery，需要将它作为一个模块引入，并使用垫片（shim）来使其全局可用。具体步骤如下：
2.1 引入 jQuery 模块
在代码中引入 jQuery 模块：
------ - ---- ---------
2.2 使用垫片
使用垫片可以将 jQuery 注入到每个模块中，使其全局可用。在 Webpack 中，可以通过配置 ProvidePlugin 实现垫片。在 webpack.config.js 文件中添加以下代码：
----- ------- - -------------------
-------------- - -
-------- -
--- -----------------------
-- ---------
------- --------
--
-
-2.3 配置 jQuery 插件
如果需要在项目中使用 jQuery 插件，则需要在 resolve.alias 中设置 jQuery 别名。在 webpack.config.js 中添加如下代码：
-------------- - -
-------- -
------ -
--------- -------------------------
-
-
-3. 示例代码
------ - ---- --------- -- -- ------ -------------------------- -- ------ ------ ---- ------ ------------------------- -- ------- ------ ---------------------------- - --------------------- ---
--------- -----
------
------
------- ----------------------------------------------------------------------------
-------
------
------- -------------------------
-------
-------4. 总结
通过以上步骤，我们可以在 Webpack 中引入 jQuery 并使其全局可用。通过垫片的方式，可以使 jQuery 注入到每个模块中，方便我们在项目中使用。同时，通过配置 jQuery 插件，可以使用常见的 jQuery 插件。希望本篇文章能够对大家在前端开发中使用 jQuery 和 Webpack 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665030c1d3423812e425f8cf