版权声明：本文为博主原创文章，遵循 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. APISIX系列 | 使用 docker-apisix 安装APISIX服务

    官方仓库:https://github.com/iresty/docker-apisix 官方仓库 拉取 git clone git@github.com:iresty/docker-apisix.g ...

  2. x264 b_annexb格式和多slice

    实际应用环境:iOS,Android x264_param_t中有下面两个参数值得注意下int i_threads;        /* encode multiple frames in paral ...

  3. 如何在本地使用scala或python运行Spark程序

    如何在本地使用scala或python运行Spark程序   包含两个部分: 本地scala语言编写程序,并编译打包成jar,在本地运行. 本地使用python语言编写程序,直接调用spark的接口, ...

  4. 容器docker快速入门

    一.概述 什么是docker docker是一个应用容器引擎,通俗的讲,docker和我们的vm虚拟机有很多相似的地方,当然也有很多不同的地方 Docker理念是将应用及依赖包打包到一个可移植的容器中 ...

  5. Golang 实现UDPServer并发送消息到ActiveMQ

    示例代码 package main import ( "net" "os" "github.com/gpmgo/gopm/modules/goconf ...

  6. Pi1-加电

    作为理工男,怎么能不折腾?终于等到我4G版的树莓派4. 1.制作系统.新手当然上官网下载官方系统,img文件,写入tf卡.mac下的步骤请见<mac下制作树莓派系统盘>,一步步来就行.思路 ...

  7. vue方法中传递dom对象示例

    <div id="app"> <input type="text" v-on:keyup="onlyNum($event)" ...

  8. Chaikin Curves in Processing

    转自:https://sighack.com/post/chaikin-curves In this post, we’ll look at what Chaikin curves are, how ...

  9. 【ARM-Linux开发】OpenACC并行编程实战笔记

    今年运气比较好,学了cuda之后,了解到了gpu的另两种使用语言opencl和openacc,  opencl(Open Computing Language ,开放计算语言)是面向异构系统的并行编程 ...

  10. RSA非对称式加解密笔记

    1.服务器生成[公钥]和[私钥],成对生成: 2.客户端生成证书信息,使用[公钥]进行加密,前提是有公钥,并生成证书信息: 3.客户端发送自身的计算机名.MAC.用户名.证书内容给服务器: 4.服务器 ...