在前端开发中，Webpack 是一个非常强大的工具，它可以将各种资源打包成一个或多个文件，实现模块化开发，提高开发效率。但是，在使用 Webpack 的过程中，我们可能会遇到各种问题，比如报错：Can't resolve 'jquery'。那么，这个问题该怎么解决呢？
问题分析
首先，让我们来分析一下这个报错的原因。Can't resolve 'jquery' 表示 Webpack 找不到 jquery 这个模块。通常情况下，我们使用 import 或 require 来引入一个模块，比如：
import $ from 'jquery';
或者
const $ = require('jquery');这时，Webpack 会在 node_modules 目录下查找 jquery 这个模块。如果找不到，就会报错：Can't resolve 'jquery'。
解决方案
那么，我们该如何解决这个问题呢？下面是几种可行的方案。
方案一：安装 jquery
最简单的解决方案就是安装 jquery。在命令行中输入：
npm install jquery --save
或者
yarn add jquery
安装完成后，再次运行 Webpack，就不会再报错了。
方案二：配置 resolve.alias
另一种解决方案是在 Webpack 配置文件中添加 resolve.alias 配置。这个配置项可以将模块名映射到一个绝对路径，从而告诉 Webpack 去哪里查找模块。比如：
module.exports = {
// ...
resolve: {
alias: {
'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js')
}
}
}这里的 path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js') 表示 jquery 的真实路径。如果你的 jquery 安装路径不同，需要根据实际情况修改这个路径。
方案三：配置 resolve.modules
还有一种解决方案是在 Webpack 配置文件中添加 resolve.modules 配置。这个配置项可以告诉 Webpack 去哪些目录下查找模块。比如：
module.exports = {
// ...
resolve: {
modules: [
path.resolve(__dirname, 'node_modules')
]
}
}这里的 path.resolve(__dirname, 'node_modules') 表示告诉 Webpack 去当前目录下的 node_modules 目录查找模块。如果你的 jquery 安装在其他目录下，需要根据实际情况修改这个路径。
示例代码
下面是一个简单的示例，演示了如何在 Webpack 中引入 jquery。
首先，我们需要创建一个 package.json 文件，用来管理我们的依赖：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
--------------- -
--------- --------
--
------------------ -
---------- ----------
-------------- --------
-
-然后，我们创建一个 index.html 文件，引入打包后的 js 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ------------ ------- ------ ---------- ------------- ------- ---------------------------- ------- -------
接着，我们创建一个 index.js 文件，引入 jquery：
import $ from 'jquery';
$('h1').text('Hello, jQuery!');最后，我们创建一个 webpack.config.js 文件，配置 Webpack：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ---------
--
-------- -
------ -
--------- ----------------------- -----------------------------------------
-
-
--运行 Webpack：
npx webpack
打包完成后，打开 index.html，就可以看到页面上的 h1 标签上显示了 Hello, jQuery!。
总结
Webpack 报错 Can't resolve 'jquery' 是一个常见的问题，通常可以通过安装 jquery、配置 resolve.alias 或配置 resolve.modules 解决。在实际开发中，我们需要根据具体情况选择合适的解决方案，以确保项目正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fc99c95b1f8cacd87899c