jquery和webpack
时间: 2023-10-21 12:30:33 浏览: 20
的区别是什么?
jQuery和Webpack是两个非常不同的东西。jQuery是一个JavaScript库,使得DOM操作更加容易,提供了丰富的API,可以帮助前端开发人员简化代码。而Webpack是一个模块打包工具,可以将各种JavaScript、CSS、图片等文件打包成一个或多个文件,使得网页加载更加快速和高效。所以说,jQuery和Webpack的主要区别是它们的功能和用途。
相关问题
jquery配合webpack
要在Webpack中使用jQuery,需要安装jQuery和webpack的相关依赖。
1. 安装jQuery
在终端中执行以下命令安装jQuery:
```
npm install jquery --save
```
2. 安装webpack相关依赖
在终端中执行以下命令安装webpack相关依赖:
```
npm install webpack webpack-cli jquery --save-dev
```
3. 创建webpack配置文件
在项目根目录下创建一个名为webpack.config.js的文件,并添加以下代码:
```
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
```
这段代码设置了入口文件为src/index.js,输出文件为dist/bundle.js,并且使用babel-loader将ES6+代码转换为ES5。
4. 创建index.html文件
在项目根目录下创建一个名为index.html的文件,并添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack + jQuery Demo</title>
</head>
<body>
<h1>Webpack + jQuery Demo</h1>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
```
这段代码设置了页面的标题和一个空的div,以及引入了打包后的JavaScript文件。
5. 创建index.js文件
在src目录下创建一个名为index.js的文件,并添加以下代码:
```
import $ from 'jquery';
$('body').append('<p>Hello World!</p>');
```
这段代码使用ES6的import语法引入jQuery,并在页面上添加一个“Hello World!”的段落。
6. 运行Webpack
在终端中执行以下命令运行Webpack:
```
npx webpack
```
这将会打包项目,并生成dist/bundle.js文件。
7. 在浏览器中查看页面
在浏览器中打开index.html文件,即可看到页面上添加了一个“Hello World!”的段落。
webpack打包忽略jquery文件
可以使用webpack的externals配置来忽略jquery文件的打包。
在webpack配置文件中添加如下代码:
```javascript
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
};
```
这样,webpack在打包时就会忽略jquery文件,而使用全局变量jQuery。需要在html文件中手动引入jquery文件。