jQuery webpack 查找’jquery’失败

在本文中，我们将介绍使用jQuery和webpack时遇到的一个常见问题：无法解析’jquery’。

问题描述

在使用webpack打包项目时，出现了如下错误提示信息：

ERROR in ./src/app.js
Module not found: Error: Can't resolve 'jquery' in '/path/to/project/src'

这表示webpack无法找到项目中引入的jquery模块。

问题解决

通常情况下，这个问题的解决方法包括以下几个步骤：

步骤一：安装jQuery和webpack

首先，确保你已经在项目中安装了jQuery和webpack。可以使用npm命令或者yarn命令进行安装：

npm install jquery
npm install webpack

或者

yarn add jquery
yarn add webpack

步骤二：配置webpack

在webpack的配置文件中，我们需要添加一个别名（alias）来告诉webpack如何解析’jquery’。打开webpack.config.js文件，添加以下代码：

const path = require('path');

module.exports = {
  // ...其他配置项
  resolve: {
    alias: {
      'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js')
    }
  }
};

这样，webpack在解析’jquery’模块时，会直接指向项目中安装的jquery文件。

步骤三：重新打包项目

完成上述配置后，我们需要重新运行webpack进行打包：

npx webpack

示例

下面是一个具体的示例，展示了如何在webpack中使用jQuery：

创建一个新的项目文件夹，并进入该文件夹：

mkdir my-project
cd my-project

初始化新的npm项目：

npm init -y

安装jquery和webpack：

npm install jquery
npm install webpack

在项目根目录下新建一个app.js文件，并写入以下代码：

import  $from 'jquery';$ (document).ready(function() {
  $('.my-element').text('Hello jQuery!');
});

在根目录下创建一个index.html文件，并引入生成的打包文件：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery webpack示例</title>
</head>
<body>
  <div class="my-element"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

在根目录下新建webpack.config.js文件，并写入以下代码：

const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js')
    }
  }
};

执行webpack命令进行打包：

npx webpack

在浏览器中打开index.html文件，可以看到页面上的.my-element元素已经被修改为”Hello jQuery!”。

总结

通过上述步骤，我们解决了在webpack中无法解析’jquery’的问题，并且实现了在项目中引入和使用jQuery的功能。正确配置webpack的resolve别名可以确保在不同模块引入jQuery时能够正确地找到并解析’jquery’模块。希望本文对你在使用jQuery和webpack过程中遇到的问题有所帮助。