版权声明：本文为博主原创文章，遵循 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. git修改提交作者和邮箱

    作用一名程序员,我们会经常混迹与不同的代码仓库,时常不同仓库会有作者信息验证.比如公司内建的gitlab一般会要求统一使用公司内部的域账号签名:github要求使用github账号签名等.因此,很容易 ...

  2. Python80个练手项目列表

    原文地址:https://www.shiyanlou.com/questions/102676/?utm_source=baidu&utm_medium=cpc&utm_campaig ...

  3. android : 解决android无法使用sun.misc.BASE64Encoder sun.misc.BASE64Decoder 的问题, 无需添加rt.jar

    一共包含: BASE64Decoder.java BASE64Encoder.java CEFormatException.java CEStreamExhausted.java CharacterD ...

  4. 阻止Bootstrap 模态框点击背景空白处自动关闭

    问题描述 模态框点击空白处,会自动关闭,怎么阻止关闭事件呢? 解决方法 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”st ...

  5. 批量实现ssh免密登录

    本节索引 场景分析 ssh免密登录 pssh工具批量管理 SHELL自动化脚本 本篇总结 场景分析 作为一个运维工程师,不是每个人工作的环境都想阿里.腾讯那样,动不动就上亿的PV量,上万台服务器.我们 ...

  6. 如何用 Go 实现热重启

    热重启 热重启(Zero Downtime),指新老进程无缝切换,在替换过程中可保持对 client 的服务. 原理 父进程监听重启信号 在收到重启信号后,父进程调用 fork ,同时传递 socke ...

  7. (转)ES6系列——let和const深入理解

    原文:https://juejin.im/post/59e6a86d518825422c0cbb6f https://www.cnblogs.com/slly/p/9234797.html-----l ...

  8. 开发日记：Windows进程守护工具

    近期,中心应用服务无故关闭.在检查系统和应用程序日志无果后采取了进程守护的方法.测试期内,脚本未出现系统资源占用过多的情况. 使用说明:1.进程守护.vbs  使用时需修改运行周期(10行).守护进程 ...

  9. iOS - 搜索关键字在结果中高亮显示

    self.labelContent.attributedText = [self highlightText:self.searchStr inStr:searchModel.eventDesc]; ...

  10. React全家桶+Material-ui构建的后台管理系统

    一.简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心. 二. ...