版权声明：本文为博主原创文章，遵循 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的两种方法的更多相关文章

  1. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  2. eclipse把jar包引入项目的两种方法

    方法一: build path引入jar包 方法二: 把jar包放入lib文件夹 区别: 把jar包放入lib文件夹,以后把程序发给别人,别人可以直接运行而无需再自己添加jar包 总结: 1.有时即使 ...

  3. 两种方法使vue实现jQuery调用

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...

  4. jQuery属性选择器.attr()和.prop()两种方法

    在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...

  5. spring 配置文件 引入外部的property文件的两种方法

    spring  的配置文件 引入外部的property文件的两种方法 <!-- 引入jdbc配置文件    方法一 --> <bean id="propertyConfig ...

  6. 用js写出光棒效应的两种方法与jquery的两中方法

    <script src="js/jQuery1.11.1.js" type="text/javascript"></script> &l ...

  7. jQuery插件开发的两种方法及$.fn.extend的详解(转)

    jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下   jQuery插件开发分为两种: 1 类级别 类级别你可以 ...

  8. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...

  9. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

随机推荐

  1. SpringCloud之application.properties和bootstrap.properties区别

    Spring是有上下文一说的,也叫Application Context,Application Context又是有父子关系的,所以必须要理解ApplicationContext是什么.Spring ...

  2. web3 编译部署调用合约

    //导入solc 编译器 let solc = require('solc') let fs = require('fs') //读取合约 let sourceCode = fs.readFileSy ...

  3. 防止同一IP多次请求攻击

    防止同一IP多次请求攻击 防止入侵者,通过死循环同一时间批量向服务器请求数据,导致服务器内存开销不断膨胀,最后直接瘫痪. 一. 新增一个spring的拦截器 , 拦截所有请求 <mvc:inte ...

  4. 【转发】SqlServer数据库表生成C# Model实体类SQL语句

    已知现有表T1 通过运行下面的sql即可,先配置表名. declare @TableName sysname = 'T1' declare @Result varchar(max) = ' /// & ...

  5. PL/SQL【32位】连接Oracle 11g【64位】

    下载64位Oracle安装: 下载PL/SQL安装:下载instantclient-basic-win32-12.1.0.1.0.zip,解压后剪切instantclient_12_1文件夹,粘贴到O ...

  6. vmare_mac 关闭完整性检查

    今天在vmware 15 安装mac10.13,安装之后不能全屏,查了很多资料最后完美解决 首先我们需要进入mac的恢复模式 等待出现苹果LOGO,直到进度条加载完毕 然后打开实用工具-终端 关闭SI ...

  7. Eclipse4.2juno安装git

    因为项目需要,需要再Eclipse4.2juno上面安装git,试了几次都没有成功,网上搜了下,结合报错发现,Eclipse4.2juno支持的最高版本是git3.2,因此,选选择3.2版本的git安 ...

  8. java多线程（四）死锁

    1.1. 什么是死锁 多线程以及多进程改善了系统资源的利用率并提高了系统的处理能力.然而,并发执行也带来了新的问题--死锁. 所谓死锁是指多个线程因竞争资源而造成的一种僵局(互相等待),若无外力作用, ...

  9. SDN实验---Ryu的应用开发（二）Learning Switch

    一:自学习交换机(二层MAC交换机)的编程思路 (一)明确问题 如何实现软件定义的自学习交换机? (二)设计解决方案 通过控制器来实现自学习交换算法,然后指导数据平面实现交换机操作 (三)确定具体的技 ...

  10. Linux命令-nohup和&

    基础 在linux终端或控制台上执行命令时,可能不希望脚本占住屏幕需要在后台执行脚本,有几种方法让脚本在后台执行: & 当在前台运行某个作业时,终端被该作业占据:可以在命令后面加上& ...