webpack4引入JQuery的两种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36185028/article/details/81114827
非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内容不变,打包:
以上两种引入方式得到的效果一样,第一种引入方式更加简单
————————————————
版权声明:本文为CSDN博主「骑着代码去流浪」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_36185028/article/details/81114827
webpack4引入JQuery的两种方法的更多相关文章
- WordPress引入css/js两种方法
WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...
- eclipse把jar包引入项目的两种方法
方法一: build path引入jar包 方法二: 把jar包放入lib文件夹 区别: 把jar包放入lib文件夹,以后把程序发给别人,别人可以直接运行而无需再自己添加jar包 总结: 1.有时即使 ...
- 两种方法使vue实现jQuery调用
引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...
- jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...
- spring 配置文件 引入外部的property文件的两种方法
spring 的配置文件 引入外部的property文件的两种方法 <!-- 引入jdbc配置文件 方法一 --> <bean id="propertyConfig ...
- 用js写出光棒效应的两种方法与jquery的两中方法
<script src="js/jQuery1.11.1.js" type="text/javascript"></script> &l ...
- jQuery插件开发的两种方法及$.fn.extend的详解(转)
jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下 jQuery插件开发分为两种: 1 类级别 类级别你可以 ...
- div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
- jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
随机推荐
- 为什么JDK代码这样写?final ReentrantLock takeLock = this.takeLock
在CopyOnWriteArrayList的源码中有一个细节值得学习,就是在addIfAbsent方法中ReentrantLock的用法,先是将一个这个成员变量this.lock重新赋值给一个局部变量 ...
- json 格式化处理工具
json 格式化处理工具 用于JSON的快速命令行处理工具,简单无依赖. 我这边列举一些最常用的: 调试 http 请求时打印格式化后的数据 格式化本地或或流中的数据 获取 json 的键值或进行执行 ...
- windows中设置php环境变量
1.我的电脑->右键(选择我的属性) 2.点击高级设置 3.点击环境变量 4.在系统变量中找到Path 点击 5.找到php.exe的文件目录,添加到path中 6.php -v 显示版本,表示 ...
- sqlserver2012 用户指定数据库访问权限
这样 用户进入的时候 就只能访问指定数据库 点击其他 显示
- ios评分功能实现
/** * 只能评分,不能编写评论 * 有次数限制,一年只能使用三次 * 使用次数超限后,需要跳转appstore */ - (IBAction)systemComentBtnAction:( ...
- 统一异常处理:HandlerExceptionResolver
SpringExceptionResolver.java package com.mmall.common; import com.mmall.exception.PermissionExceptio ...
- Python浮点数数据精度控制
代码 import decimal from decimal import Decimal, getcontext if __name__ == '__main__': decimal.getcont ...
- An unexpected exception occurred while binding a dynamic operation 错误的一种情况
这种错误,出现在dynamic传值的时候,无法动态访问变量. 出错原因是: 使用了嵌套类,class里面又定义了class
- 【Spring Boot学习之七】自定义参数&多环境配置&修改端口号&yml
环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.自定义参数通过注解直接获取配置文件application.properties中配置key的value1.appl ...
- PHP urlencode空格被转为+的问题
我想既然各位点进来,绝大数是因为你遇到了空格被转为+号所带来的坑 不过没关系,解决方案很简单:使用rawurlencode()来进行编码即可~此函数遵循RFC 3986标准,空格会被转为%20 同时, ...