详解webpack3如何正确引用并使用jQuery库

经过百度、谷歌、SF、stackoverflow后终于将webpack3引用jQuery的问题解决了，网上的重复文章太多，大多也都过时了，webpack这两年发展也非常快，大多都是1.0版本的文章，与时俱进的很少，刚刚看了一眼现在已经发展到3.5.5了，真正看其中一篇文章能解决问题的几乎没有，下面是webpack3的实现代码。

首先在配置页面中加入外部引用

externals: {
  jquery: "jQuery" //如果要全局引用jQuery，不管你的jQuery有没有支持模块化，用externals就对了。
}

然后在入口js中加入引用

const $ = require("jQuery");

这样就可以了，是不是很简单？之前用了ProvidePlugin的方法，虽然$好用了，但是jQuery的方法都不能使用，如果朋友们知道为什么的可以留言给我。

new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery'})

当然引用jQuery库的方法不止这一种，大家可以讲一讲自己的方法，互相学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • webpack中引用jquery的简单实现

    1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • 详解webpack3如何正确引用并使用jQuery库

    经过百度.谷歌.SF.stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发展到3.5.5了,真正看其中一篇文章能解决问题的几乎没有,下面是webpack3的实现代码. 首先在配置页面中加入外部引用 externals: { jquery: "jQuery" //如果要全局引用jQuery,不管你的jQuery有没有支持模块化,

  • 详解C++右值引用

    详解C++右值引用

    概述 在C++中,常量.变量或表达式一定是左值(lvalue)或右值(rvalue). 左值:非临时的(具名的,可在多条语句中使用,可以被取地址).可以出现在等号的左边或右边.可分为非常量左值和常量左值. 右值:临时的(不具名的,只在当前语句中有效,不能取地址).只能出现在等号的右边.可分为非常量右值和常量右值. 左值引用:对左值的引用就是左值引用.可分为非常量左值引用和常量左值引用. 注:常量左值引用是"万能"的引用类型,可以绑定到所有类型的值,包括非常量左值.常量左值.非常量右值和

  • 详解SpringBoot如何删除引用jar包中的无用bean

    目录 前言 代码示例 实现代码示例 前言 公司有个项目,时间比较赶,而且项目的部分需求,和之前做的项目部分功能一样,为了赶速度和直接将之前多模块的maven项目中的部分模块,直接以jar包的形式引入到新项目中了,虽然省去了不少开发时间,但是造成项目需要导入引入项目jar的相关依赖,导致项目臃肿,启动很慢.有没有办法让项目只加载自己需要的bean呢? 当然我们可以直接修改源代码重新打包引入去解决,但是这个办法太多麻烦. 通过百度的手段,查询可以在springboot启动类上用@ComponentS

  • 详解python算法常用技巧与内置库

    近些年随着python的越来越火,python也渐渐成为了很多程序员的喜爱.许多程序员已经开始使用python作为第一语言来刷题. 最近我在用python刷题的时候想去找点python的刷题常用库api和刷题技巧来看看.类似于C++的STL库文档一样,但是很可惜并没有找到,于是决定结合自己的刷题经验和上网搜索做一份文档出来,供自己和大家观看查阅. 1.输入输出: 1.1 第一行给定两个值n,m,用空格分割,第一个n决定接下来有n行的输入,m决定每一行有多少个数字,m个数字均用空格分隔. 解决办法

  • 详解C语言正确使用extern关键字

    利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数,下面就结合具体的实例,分类说明一下. 一.引用同一个文件中的变量 #include<stdio.h> int func(); int main() { func(); //1 printf("%d",num); //2 return 0; } int num = 3; int func() { printf("%d\n",num); } 如果按照这个顺序,变量 num在main函

  • 详解Java日志正确使用姿势

    前言 关于日志,在大家的印象中都是比较简单的,只须引入了相关依赖包,剩下的事情就是在项目中"尽情"的打印我们需要的信息了.但是往往越简单的东西越容易让我们忽视,从而导致一些不该有的bug发生,作为一名严谨的程序员,怎么能让这种事情发生呢?所以下面我们就来了解一下关于日志的那些正确使用姿势. 正文 日志规范 命名 首先是日志文件的命名,尽量要做到见名知意,团队里面也必须使用统一的命名规范,不然"脏乱差"的日志文件会影响大家排查问题的效率.这里推荐以"proj

  • 详解webpack3编译兼容IE8的正确姿势

    上一篇中的方法在 webpack 更新后,uglify 缓存地址也发生了变化,需要重新找地址. 后来测试发现不论是 uglify-js2 uglify-js3 都是支持 IE8 兼容处理的. 但在 webpack.optimize.UglifyJsPlugin 中加配置参数却无效.(webpack 的锅) 总不能每次都手动去找 webpack 缓存路径进行劫持吧,那要疯了. UglifyjsWebpackPlugin 关键点依然在于UglifyjsWebpackPlugin插件,但并不是内置的

  • 详解Android XML中引用自定义内部类view的四个why

    今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类view的规则 本文主要是总结why,所以先把XML布局文件中引用内部类的自定义view的做法摆出来,有四点: 1.自定义的类必须是静态类: 2.使用view作为XML文件中的tag,注意,v是小写字母,小写字母v,小写字母v: 3.添加class属性,注意,没有带android:命名空间的,表明该自

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

  • 详解android.mk中引用第三方库的方法

    一.集成第三方jar包: 1.在项目目录下创建目录libs(不创建也行,一会儿指向对应路径就好),将第三方的jar包放进去. 2.在Android.mk文件中进行配置: include $(CLEAR_VARS) LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES := smartphotolib:../../libs/smartphotolib.jar #前面为自定义的名(umeng_message_push),起什么名都可以,":"后面的为jar包在项目下对应

随机推荐