首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery没有发现webpack生活中的内幕

jQuery是一个流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画效果和AJAX等操作。它提供了简洁的API,使得开发者可以更轻松地操作DOM元素和处理事件。

然而,jQuery本身并不依赖于Webpack或其他构建工具。Webpack是一个模块打包工具,用于将多个模块打包成一个或多个文件,以便在浏览器中加载。它可以处理JavaScript、CSS、图片等资源,并提供了许多功能和插件来优化代码和提高性能。

在使用jQuery时,可以选择将其作为一个独立的文件引入到HTML页面中,也可以通过npm或其他包管理工具安装jQuery,并在项目中使用模块化的方式引入。如果选择使用模块化的方式,可以借助Webpack等工具来进行打包和优化。

对于前端开发者来说,使用Webpack可以带来许多好处。它可以帮助我们管理项目中的依赖关系,提供代码分割和懒加载等功能,优化资源加载速度。同时,Webpack还支持各种插件和加载器,可以进行代码压缩、文件合并、图片优化等操作,提高项目的性能和可维护性。

总结起来,jQuery和Webpack是两个不同的工具,各自有着不同的作用。jQuery用于简化JavaScript开发,而Webpack用于模块打包和优化。它们可以结合使用,但并不是必须的。在实际开发中,可以根据项目需求和个人喜好来选择是否使用它们。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

生活小孔成像 - 发现场景外秘密

主要是我看到今天要介绍技术后已经震惊开始说胡话乱编故事了。 那么好,让我们快点进入正题吧,让我们先从生活小孔成像讲起。 一、 生活小孔相机 你看到下面这张图片时,看到了什么? ?...这就是生活小孔成像,当窗户开很大时,我们看到只是模糊影子,就像上图一样。但如果把窗户关很小,甚至用窗帘来遮挡使得只露一个洞,墙上倒影就会变为这样: ?...把倒影颠倒过来,和真实窗外场景做下对比,你会看到惊人相似: ? 这就是我在29. 小孔相机阐述过小孔成像生活实例,你可以再次阅读这篇文章,了解细节。...三、偶发式反小孔相机 如果说生活这种偶发式小孔相机已经让你感觉很神奇了的话,那么偶发式“反小孔”相机会更加让你震惊。下面这个场景,(a)图窗户构成了一个相机,(c)图是墙上像。...但经常我们会发现由于信噪比不够,获得投影比较模糊。但如果在输入视频仔细搜索,我们会发现更好参考帧。比如下图中,我们可以用a - b得到d,d中有较为模糊投影 ? ?

2.8K20

发现心流-日常生活最优体验》摘录与想法(二)

4、 工作是否有助于个人生活提升,并非取决于外在条件,而是在于我们工作态度,以及面对挑战时我们能汲取何种体验与感受。...5、 对职业热爱与奉献,不见得就是“工作狂”——这个词只适用于在眼中除了工作,没有其他目标及责任的人。工作狂只看得见工作上挑战,只愿学习与工作相关技能,而且无法从其他活动得到心流。...11、 希腊文“idiot”(英语是“白痴、傻瓜”意思)一词,原意是“独居的人”,可见在他们观念,人若是断绝社群互动,心智上便会陷入低能。...15、 还有一项发现出乎我们意料:家人关系越亲近,家庭争端就越多。 一旦家庭真正出现问题时,父母与子女却会为了避免争吵而相互回避。 物极必反,爱越多,恨越多;平平淡淡,反而无爱无恨。...一般而言,生长于大家庭子女,较有机会发展技能、面对挑战,也较能体验到生活心流。 靠自身素质与相互理解,省去不必要争吵或争辩,专注于解决问题及个人追求。

33810

【干货】将BI带入普通人生活,QLIK首席顾问大谈《大数据大发现》(内附PPT)

大数据大发现 Gartner最近发布商业智能与分析平台魔力象限,Qlik和Tableau这两家力压老牌巨头如SAS、SAP、IBM等,几乎独占魔力象限领导者宝座。...很荣幸,在上月31号举办首届中国(杭州)工业大数据产业发展高峰论坛上,钱塘数据有幸和Qlik面对面,Qlik首席顾问王波也在场为500多位与会业内伙伴们作了《大数据大发现》演讲。...而在互联网、大数据时代,谁能够跟随潮流,并且能够激活更多用户,谁就是投资者眼中香饽饽。...而SAS、SAP、IBM等数据分析平台,都是企业级高级分析平台,他们变量多达几百上千,非普通人可以玩转,其使用者通常局限于个别数据科学家手中,因而在今天时髦的人人都是数据分析师——商业智能与分析平台领导者魔力象限...,必然找不到自己位置。

852100

走进webpack(2)–第三方框架(类库)引入及抽离

-- jQuery代码容器 -->   然后,我们npm run dev看一下,会发现页面已经有jQuery代码所生成文字,说明我们引入jQuery...你可以在每一个需要jQuery页面这样引入。但是这样会很麻烦,我们如果通过这样方式引入了jQuery,但是整个项目中却并没有写一行jQuery代码,那么webpack也是会把它打包进去。...,使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" })   这样就可以了,但是别忘了把main.js通过import引入jQuery...会发现也同样出现了jQuery生成文字。   ...-- vue容器 --> {{message}}   然后我们试一下npm run dev,页面打开之后我们发现没有hello vue,f12看下控制台

88610

走进webpack(2)--第三方框架(类库)引入及抽离

-- jQuery代码容器 -->   然后,我们npm run dev看一下,会发现页面已经有jQuery代码所生成文字,说明我们引入jQuery...你可以在每一个需要jQuery页面这样引入。但是这样会很麻烦,我们如果通过这样方式引入了jQuery,但是整个项目中却并没有写一行jQuery代码,那么webpack也是会把它打包进去。...,使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" })   这样就可以了,但是别忘了把main.js通过import引入jQuery...会发现也同样出现了jQuery生成文字。   ...-- vue容器 --> {{message}}   然后我们试一下npm run dev,页面打开之后我们发现没有hello vue,f12看下控制台

1.7K110

Vue 中使用 jQuery

NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save webpack配置 在项目根目录下build目录下找到webpack.base.conf.js...文件,在开头使用以下代码引入webpack,因为该文件默认没有引用, var webpack = require('webpack') 然后在module.exports添加一段代码, // 原有代码...main.js里导入jQuery import 'jquery' 在Vue组件里使用 $ or jQuery 写了操作dom代码 接着启动项目 npm run dev 但是编译却报错了: http...eslint 检查 机智朋友肯定想到跟eslint有关,没错,这时候需要做下一步就是要修改根目录下.eslintrc.js文件了,在改文件module.exports,为env添加一个键值对 jquery...,console.log($('选择器')) ,你会发现成功使用jQuery获取到了DOM。

1.6K10

webpack使用来打包前端代码

image 运行npm init -y初始化项目,使用npm管理项目中依赖包 创建项目基本目录结构 使用npm i jquery -s安装jquery类库 创建main.js并书写隔行变色代码逻辑...image 在项目根目录创建webpack.config.js 由于运行webpack命令时候,webpack需要指定入口文件和输出文件路径,所以,我们需要在webpack.config.js配置这两个路径...来进行打包,发现报错,此时需要借助于package.json文件指令,来进行运行webpack-dev-server命令,在scripts节点下新增"dev": "webpack-dev-server..."指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js文件,这是因为webpack-dev-server将打包好文件放在了内存 把bundle.js放在内存好处是:由于需要实时打包编译...,所以放在内存中速度会非常快 这个时候访问webpack-dev-server启动http://localhost:8080/网站,发现是一个文件夹面板,需要点击到src目录下,才能打开我们index

1.3K10

webpack基本使用

⑤ 运行 npm install jquery –S 命令,安装 jQuery ⑥ 通过 ES6 模块化方式导入 jQuery,实现列表隔行变色效果 运行:发现语法错误,颜色也没有改变,因为上面 index.js...在项目中配置 webpack ① 在项目根目录,创建名为 webpack.config.js webpack 配置文件,并初始化如下基本配置: [在这里插入图片描述] [在这里插入图片描述] ②...在 package.json scripts 节点下,新增 dev 脚本如下: [在这里插入图片描述] ③ 在终端运行 npm run dev 命令,启动 webpack 进行项目的打包构建 [...是没有兼容性,所以在 index.html 导入 mian.js 替换掉之前 index.js [在这里插入图片描述] 运行: [在这里插入图片描述] 5....main.js 可以查看到 index.js 和 jquery.js 这两个文件内容 [在这里插入图片描述] [在这里插入图片描述]

28430

【Vue】webpack基本使用

运行npm install jquery -s命令,安装jQuery 通过ES6模块化方式导入jQuery,实现列表隔行变色效果 <!...', 'red') $('li:even').css('background-Color', 'pink') }) 将js文件导入index.html之后,发现没有效果,这时我们就需要webpack...webpack默认约定 大家可能有个疑问,就是打包时候为什么会打包index.js这个文件,它是怎么寻找路径等问题。 在webpack4和5版本,有如下默认约定,找不到就会报错。...这种打包实际上时虚拟打包,并不是每次保存打包之后将main.js进行了修改,当我们修改代码保存自动打包之后,我们发现页面UI并没有变化,那是因为main.js实际上没有修改,访问自动打包修改后页面需要访问本地...8080端口 在这个http服务器内才能访问到修改后内容,我们前面说了修改后js并没有保存到main.js,那它保存到哪里去了?

63010

(1724) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

--生产依赖: 就是比如我们javascript使用了jquery,而我们最终程序也需要这个包(最终程序正常运行需要)。这个包就在package.json下dependencies。...采用(2.1~2.3三种方式) 2.1 全局安装 npm install jquery 或者 npm install jquery -g 安装完成后,会发现在package.json并不存在这个包依赖...执行该条指令后产生后续效果为: (1)会把jquery包安装到node_modules目录 (2)会在package.jsondependencies属性下添加jquery (3)之后运行npm...执行该条指令后产生后续效果为: (1)会把jquery包安装到node_modules目录 (2)会在package.jsondevDependencies属性下添加jquery (3)之后运行npm.../node_modules 下(运行 npm 命令时所在目录),如果没有node_modules目录,会在当前执行npm命令目录下生成node_modules目录。

75520

4-11 shimming 作用

然而,一些第三方库(library)可能会引用一些全局依赖(例如 jQuery $)。这些库也可能创建一些需要被导出全局变量。...image.png 发现即使在入口 index 引入 jquery,但是 ui 找不到该变量,这还是因为模块引入变量作用范围是模块内,正确用法是哪里使用,就在哪里引用(虽然webpack 底层只会对相同模块加载一次...可是对一些老三方库,并没有引用 jquery,怎么办呢,他们默认 jquery 是全局变量可以直接引用。 要解决这个问题,我们把 jquery 作为我们应用程序一个全局变量就可以了。...使用 ProvidePlugin 后,能够在通过 webpack 编译每个模块,通过访问一个变量来获取到 package 包。...如果 webpack 知道这个变量在某个模块中被使用了,那么 webpack 将在最终 bundle 引入我们给定 package。

76820

后端视野学 Webpack ,文武双全?

,这种方式有没有让你回想到 maven maven install 命令,这种奇怪熟悉感~ 等 jquery 包安装完成后,我们就可以在 node_modules 目录下查看到刚刚安装包 然后在项目中进行引用...浏览器查看 JS 运行正常 以上方式也是传统引包方式,跟 webpack 仍是没有半点关系。...以三个问题收尾,我们来说下一个插件 html-webpack-plugin 2)html-webpack-plugin 我们上面通过访问 webpack server 给定 URL 地址,发现不能直接访问到我们...image-20210828235635349 我们发现会生成冗余文件,并没有把旧文件删除,这难道每次打包都要进行手动删除吗?当然不是!...3)所遇问题 ① 问题 1:实际运行报错行数 与 源代码行数 不匹配 那么要解决这个问题也很简单,就需要在 webpack.config.js 添加以下配置: 配置完查看结果,至此我们可以发现

53850

webpack

,重新进行项目的打包 命令没有结束,会一直监听源代码有没有变化,每当保存源代码,都会自动打包 注意:这里又会出现问题,自动打包后,vscode,右键打开 index.html 文件会发现没有变化。..."; /*导入jquery,用$符号接*/ //导入样式,在webpack,一切都是模块 import "....//即先调用css-loader,再调用style-loader,前面没有loader后给会webpackwebpack把style-loader处理结果,合并到/dist/mymain.js,生成最终打包好文件...通过 myindex.js 导入图片 import $ from "jquery"; /*导入jquery,用$符号接*/ //导入样式,在webpack,一切都是模块 import "....会覆盖webpack.config.jsmodel选项 } 执行 npm run dev 命令后,会发现生成 js 文件、图片文件(只有 base64 格式图片会生成)和 index.html

1.5K30

Vue Webpack 组件化开发实践

,如此沉重jQuery在不那么复杂 SPA 完全可以予以摒除;最兴奋是户界面完全可以用嵌套组件树来描述,再也不用写重复代码or拷贝(如果撸好组件封装),生活原来可以如此美好,这是我不得不欢喜非常...痛并幸福着,生活就是这样。...等一套组合,以及所经历姿势变换历程;这 Vue 使用确立了前端之路新里程碑;而 Gulp,Webpack 学习更使得对工具有了新认识——只有你想不到,没有做不到。...此一篇絮叨,是对过去 Vue + Webpack 组件化开发实践一些总结和分享。...上述言论,还有些补充;对于 vue 入门,这是一件非常容易事儿;但到现实协作开发,诸多东西都是挺需要探讨一番;譬如使用 vue-resource 来替代 JQuery-Ajax;再比如 vue 虽然为组件

82650

(2124) webpack实战技巧:webpack对三方类库优化操作

2.优化第二步--三方类库分离 2.1 单个三方类库分离 2.1.1 第一步:修改入口文件 抽离第一步是修改入口文件,把我JQuery加入到入口文件: config/webpack.entry.js...优化插件,并进行相关配置,如下: new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件名字,我们起jquery name:...配置完成后,我们先删掉以前打包dist目录,然后用webpack再次打包,你会发现jquery被抽离了出来,并且我们entry.js文件变很小。 ? ?...修改代码如下: new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件名字,我们起jQuery name:['jquery'...2.2.4 打包 webpack 配置完成后,我们先删掉以前打包dist目录,然后用webpack再次打包,你会发现jquery、vue被抽离了出来。 ? ?

47040

webpack 4 30 个步骤打造优化到极致 react 开发环境

,比如加到 6 然后你可以在代码改变按钮文字,随便改点东西,会发现,页面刷新后,数字重新变为 0 这显然不是我们想要,想要是,能不能把页面的状态保存了,也就是更改了代码后,页面还是保存了数字为...webpack.HotModuleReplacementPlugin() ], 完事之后,继续更上边操作,点击按钮,数字增加,然后更改内容,发现还是没有保存状态。。。...其原理就是把网页依赖基础模块抽离出来打包到 dll 文件,当需要导入模块存在于某个 dll 时,这个模块不再被打包,而是去 dll 获取。 安装 jquery,并在入口文件引入。.../build/webpack.dll.config.js", 运行 npm run build:dll 你会发现多了一个 dll 文件夹,里边有 dll.js 文件,这样我们就把我们 jquery 这些已经单独打包了...需要再安装一个依赖 npm i add-asset-html-webpack-plugin 它会将我们打包后 dll.js 文件注入到我们生成 index.html .在 webpack.base.config.js

2.3K21
领券