非script标签的形式引入JQuery。

安装JQuery：

先安装加载器expose-loader，用于将插件暴露到全局中供其他模块使用:

npm i expose-loader --save

安装JQuery:

npm install jquery --save

以上两个模块也是项目发布依赖的模块，因此安装参数选择--save。

如何使用：

1.第一种方法：在打包入口文件中直接require并用expose-loader暴露$到全局

打包入口文件./src/index.js中引入JQuery:

require("expose-loader?$!jquery");

在html文件中引入测试是否全局可用./dist/index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="main.js"></script>
</head><body><script>$(function() {console.log($("body"));})</script>
</body></html>

打包会自动在./dist目录下生成main.js

浏览器打开./dist/index.html文件在控制台得到输出结果。

注：如果在js文件中直接使用var $ = require("jquery");引入$无法暴露到全局，只能在当前js文件中使用。

2.第二种方法：在打包入口文件引入JQuery，在配置文件中暴露到全局

项目根目录创建配置文件./conf/webpack.dev.js:

const path = require("path");
module.exports = {mode: "development", //打包为开发模式entry: "./src/index", //入口文件output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径path: path.resolve(__dirname, "../dist"),filename: "main.js"},module: {rules: [//暴露$和jQuery到全局{test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径use: [{loader: 'expose-loader',options: 'jQuery'}, {loader: 'expose-loader',options: '$'}]}]}
}

入口文件中./src/index.js引入jquery:

require("jquery");

测试文件./dist/html内容不变，打包：

以上两种引入方式得到的效果一样，第一种引入方式更加简单

webpack4引入JQuery的两种方法相关推荐

HTML引入JS的两种方法
1.HTML引入JS的两种方法: 引入js的第一种方法 <!DOCTYPE html> <html lang="en"> <head> ...
python字符串成熟编码_python字符串转公式两种方法获取网页编码python版
在web开发的时候我们经常会遇到网页抓取和分析,各种语言都可以完成这个功能.我喜欢用python实现,因为python提供了很多成熟的模块,可以很方便的实现网页抓取. 但是在抓取过程中会遇到编码的问题 ...
jquery生成二维码怎么添加图片（两种方法）
github项目地址: https://github.com/fengliting/erweima 注意:这里实现的是第一个方法自动生成二维码里面添加图片,有两种方法,一种是使用jquery原生的二 ...
单击触发jquery.autocomplete的两种方法
jquery.autocomplete的参数 minChars设置为0时,默认要双击才会触发jquery.autocomplete,如果想要单击触发的话,得进行一定的处理才行.下面讲下我知道的单击触发 ...
php ajax jquery 表单重复提交,jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不 ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
在Vue-cli脚手架中引入图片最常用的两种方法
CommonJS API定义了很多普通应用程序(主要指非浏览器的应用)使用的API,require就说其中之一,我们通常需要在组件中引入图片时,可以在Data里使用这个方法require(" ...
水平集方法引入主动轮廓模型算法中的两种方法
水平集方法引入主动轮廓模型算法中的两种方法 1.传统的基于主动轮廓模型和水平集理论的方法 2.变分水平集方法在讲解水平集理论在主动轮廓模型中的应用前,我们先用流程图说明一下常见的处理主动轮廓模型的流 ...
jQuery的 $.ajax防止重复提交的两种方法(推荐)
本文给大家分享两种jquery 的ajax防止重复提交的方法,第一种方法对于onclick事件触发的ajax,在beforeSend中使点击按钮不可用,ajax结果返回后置为可用,第二种利用jquer ...

webpack4引入JQuery的两种方法

安装JQuery：

如何使用：

webpack4引入JQuery的两种方法相关推荐

最新文章

热门文章