版权声明：本文为博主原创文章，遵循 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. php – 通过curl从url获取JSON数据

    我试图通过curl连接从URL获取JSON数据.当我打开链接时:它显示{“version”:“N / A”,“success”:true,“status”:true}.现在,我希望获得以上内容. 到目 ...

  2. [转]初识NuGet - 概念， 安装和使用

    1. NuGet是什么? NuGet is a Visual Studio 2010 extension that makes it easy to add, remove, and update l ...

  3. vue-router踩坑日记Unknown custom element router-view

    今天笔者在研究vue-router的时候踩到了一个小坑,这个坑是这样的 笔者的具体代码如下:router.js import Home from '@/components/Home.vue'; im ...

  4. Kibana启动后外网访问不了

    问题 Kibana启动后,使用外网访问 http://ip地址:5601 访问不了日志中最后显示 "statusCode":302 ,在控制台 curl http://localh ...

  5. 【转发】jquery实现自动打开新的页签

    通常我们想要浏览器在回调方法中打开一个页签,用这个方法 //window.open("http://www.baidu.com") ;       //自动打开新窗口,会被浏览器拦 ...

  6. 【转载】 CUDA_DEVICE_ORDER 环境变量说明 （ ---------- tensorflow环境下的应用 ）

    原文地址: https://www.jianshu.com/p/d10bfee104cc ------------------------------------------------------- ...

  7. postman 测试Excel文件导入导出功能

    1.导入的测试方法 选择form-data,key值填写方法对应的参数,选择File,Value处上传文件即可. 2. 导出的测试方法 在导出文件的时候,响应结果是乱码,然后在测试的时候选择下载,下载 ...

  8. python初级（302） 7 列表

    一.列表的概念: 1.创建一个列表 friends = list() 2.列表可以包含的内容: m_list = [5, 7, 9, 20] letters = ['a', 'b', 'e'] 3.从 ...

  9. javafx这些学会后，开发就不难了，往tablecloumn列中添加按钮，修改javafx中tableview中tablecell中的值，修改完回车表示保存到内存中

    javafx开发过程中遇见难题,往tablecloumn列中添加按钮 想了很久的方法,也配有办法判断每行中有数据的地方添加按钮set bank_caozuo.setCellFactory((col)- ...

  10. Parcel 搭建浏览器自动刷新的 非 SPA项目

    重点:parcel index.html 需要引入 index.js 否则不自动刷新