背景
在进行前端开发中，我们经常需要使用到 jQuery 库。而在使用 Webpack 进行模块打包的过程中引入 jQuery 可能会遇到一些问题。本文将介绍在引入 jQuery 过程中遇到的常见问题及解决方法，旨在帮助读者更深入地了解 Webpack 和 jQuery。
问题描述
在使用 Webpack 进行模块打包时，我们可能会遇到以下问题：
1. jQuery 引入失败
在 webpack.config.js 配置文件中添加 jQuery 的路径：
resolve: {
alias: {
jquery: path.resolve(__dirname, 'jquery.min.js')
}
}在代码中引入 jQuery：
import $ from 'jquery';
但是运行时会报错：
Uncaught ReferenceError: $ is not defined
这是因为在 Webpack 中引入 jQuery 时，需要使用 ProvidePlugin 插件，为全局变量或模块提供统一的访问方式。如果没有配置 ProvidePlugin，则浏览器会找不到全局的 $ 对象。
2. jQuery 版本冲突
在使用 Webpack 打包多个模块时，如果其中一个模块依赖的是 jQuery 1.9.1 版本，而另一个模块依赖的是 jQuery 3.3.1 版本，可能会引发版本冲突的问题。
这是因为在同一个页面中引入多个版本的 jQuery，会导致全局变量 $ 被覆盖，从而影响到其他模块的正常运行。
解决方法
1. 使用 ProvidePlugin
在 webpack.config.js 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- -----------------------
-- ---------
------- ---------
---------------- --------
--
-
--该配置告诉 Webpack，每当发现代码中使用了 $、jQuery 或 window.jQuery 这些变量时，会自动将其替换为引入的 jQuery 库。
2. 使用 externals
如果您希望使用全局的 jQuery 对象，而不是通过模块引用，那么可以通过 externals 配置来实现。
在 webpack.config.js 配置文件中添加以下代码：
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};在代码中直接使用全局变量 $ 和 jQuery：
const $ = window.$; const jQuery = window.jQuery;
这种方式可以让所有模块共享同一个全局 jQuery 对象，避免了版本冲突的问题。
总结
使用 Webpack 引入 jQuery 可能会遇到一些问题，例如引入失败、版本冲突等。为了解决这些问题，我们可以使用 ProvidePlugin 或者 externals 配置。通过本文的介绍，希望读者能够更深入地了解 Webpack 和 jQuery，并在实际开发中避免类似问题的出现。
示例代码
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
------ -
------- ----------------------- ----------------
-
--
-------- -
--- -----------------------
-- ---------
------- ---------
---------------- --------
--
-
--
-- -------
------ - ---- --------- -- ------------
---------------------- -------
-- ----------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ------------------ -------------
------- ------------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4abc2f6b2d6eab30229b5