Webpack打包后文件报错 $ is not defined or jQuery is not defined

最新推荐文章于 2023-10-12 00:00:00 发布
最新推荐文章于 2023-10-12 00:00:00 发布
阅读量878 收藏 1
点赞数
文章标签： webpack jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39482708/article/details/122403292
版权

在项目中使用本地jQuery时, 写代码时不会报错, 但是经过webpack打包后, 文件会报$ is not defined or jQuery is not defined的错误，这个错误很明显就是webpack打包后的文件找不到$和jQuery变量, 那么我们来解决这个问题.

解决方案

既然webpack找不到这两个变量, 我们就在配置文件中直接告诉它好了.

  1. 增加alias配置, 告诉jquery变量对应的文件路径

20220110082852-2022-01-10-08-28-53

  1. 引入webpack变量

20220110083803-2022-01-10-08-38-04

  1. 增加webpack插件配置, 告诉jquery $ jQuery 这三个变量等价

20220110083051-2022-01-10-08-30-52

至此我们就解决了这个问题.

扩展

对于以上的解决方案, 是有通用性的, 凡是webpack打包后找不到某些变量, 都可以用以上方案进行解决.

替代方案

其实我们也不必打包jquery文件, 可以利用cdn, 这样还能节约自己服务器的带宽.

  1. 在index.html文件页脚中引入外部CDN

20220110083319-2022-01-10-08-33-19

  1. 安装@types/jquery作为开发依赖
npm install @types/jquery -D

文章首发于: https://w2fenx.com/291.html

qq_39482708
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue项目报错webpackJsonp is not defined问题
01-19
但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。 可以手动改文件引用，但是推荐以下解决办法： 找到build→webpack.prod...
webpack DllPlugin xxx is not defined解决办法
10-15
总结，解决"webpack DllPlugin xxx is not defined"的关键在于检查并确保 `DllPlugin` 和 `DllReferencePlugin` 的配置一致性，特别是 `context`、`library` 和 `name` 的设置，以及确保生成的 DLL 文件被正确地引入...
关于Vue+Webpack引入Jquery第三方插件,出现jquery is undefined的问题
yxyy3511的博客
12-20 1337
最近接到关于网站SEO的需求，于是用了vue-ssr,发现引入的第三方插件后出现了jquery is undefined。 一般的webpack配置不能解决这个问题，于是找了相关资料，发现借助expose-loader就可以完美解决。 webpack.base.conf.js  module: {         rules: [{           test: require.reso...
Vue小知识： $ is not defined错误解决
热门推荐
危险、的博客
03-07 7万+
错误原因：该错误是未安装JQuery依赖包导致。 解决方案：安装依赖包 1.执行安装jquery依赖包命令 cnpm install jquery --save 2.webpack配置 （1）.在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用 var webpack = require('webpac...
webpack is not defined
AinUser的博客
02-10 2366
解决方案： 在当前文件头部加上 const webpack = require('webpack');
Webpack 解决：ReferenceError: dist is not defined 的问题
最新发布
狮子座的男孩
10-12 695
想在 `webpack` 的配置中，创建一个 `dist 文件夹`来存放 `npm run build` 打包后的文件，但发现运行代码后报错；
解决报错ReferenceError: jQuery is not defined
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-09 818
【代码】解决报错jQuery is not defined。
jQuery报错：Uncaught ReferenceError: $ is not defined解决方法
程序员凯小白的博客
03-03 4万+
jquery报错：Uncaught ReferenceError: $ is not defined 出现的可能原因： 1，你未引用jquery库jquery.min.js文件，或者说路径错误； 2，忽略了HTML中<script>引入jQuery文件的顺序，要把JQuery库的引用放到第一个<script>引用前面，这样顺序执行后面的js文件才能识别$； 上面这两个是最经常出现的错误。 但是还有一个不易察觉的问题也会导致出现此错误。 引入jquery不光可以从本地项目路
webpack4 配置 ssr 环境遇到“document is not defined”
01-21
ReferenceError: document is not defined 本次package.json使用版本信息： { vue-loader: ^15.4.2, mini-css-extract-plugin: ^0.4.3, webpack: ^4.20.2, webpack-cli: ^3.1.2 ... } 相关代码 问题原因： ...
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
解决使用 jQuery 在 Webpack 打包内容的过程中遇到的问题：‘ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43‘
狮子座的男孩
10-08 1041
1、出现问题的提示为： 'ERROR in ./node_modules/jquery/lib/node-jquery.js 13:24-43'; 'Module not found: Error: Can't resolve 'location' in 'D:\*******\Webpack\node_modules\jquery\lib' @ ./04index2.js 1:0-22 9:0-1 10:4-5 11:4-5'; 2、解决问题的方案： A、去 npm 社区去搜一下最新的 jquery
Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
SImon_Lee的博客
05-12 2万+
前言：由于对webpack的了解有限，所以在项目部署出现许多问题 一、webpack使用ES6语法，第三方js可以引入通过import，可以通过npm 配置到项目中或者直接下再加入项目js文件中 首先无论require还是import，都不是webpack的发明，它们是已经存在于世的不同的模块化规范(目前都不能直接运行于浏览器,于是需要通过webpack在配合各种plugin、loader将其
webpack: 5 报错，错误
qq_36413371的博客
05-11 1361
webpack打包jquery的插件（EasyLazyLoad）时，报错。打包时打包文件被占用了。建议关闭访问index.html的窗口重新打包。方法一： //多个js文件用到jquery，用这种方法。对比了下发现打包的文件根本不在上面的路径上，而是在dist的目录下。然后在EasyLazyLoad.js插件的最上面一行引入。在jquery.min.js的做最后写上下面的代码。在webpack.config.js中。先 在index.js中导入文件。并 在入口函数按需引入。
webpack is not defined错误解决
weixin_34138056的博客
02-16 6536
1、 webpack.config.js文件： module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/a.js",//已多次提及的唯一入口文件 output: { // devtool: 'eval-source-map...
提示jQuery is not defined错误原因
jinhua1314的专栏
08-08 4206
1、没有导入jQuery的js文件 2、
vue引入jquery报错 $ is not defined
liuxing393724034的博客
06-11 2万+
在webpack.base.conf.js里加入 const webpack = require("webpack") 然后在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQu...
关于jQuery 提示$ is not defined错误分析及解决
php菜鸟技术天地
11-18 3万+
$ is not defined这种提示想必在调试时经常会遇到吧， 经过搜索查询了一下结果是引入Jquery的顺序不对， 把错误提到的语句或函数提到最前面试试 改过来就可以了，有此问题的朋友可以参考下哈
Webpack引入jquery及其插件的几种方法
甘焕的博客
07-15 7万+
在webpack中引入jquery很困难，引入jquery插件更困难，本文提供了多种方法在webpack项目中引入jquery及其相关插件。
Vue 中使用 jQuery
Cool的博客
10-10 1638
题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢 _^ ^_），结果遇到问题，最终倒腾解决。 编译报错：$ is undefined or no-undef '$' is not defined， 假设你已经使用vue-cli搭建好了开发的脚手架，接下来，看下面。。。 NPM 安装 jQuery，项目根目录下运行...
Vue 报错ReferenceError: $ is not defined
08-12
引用中提到的解决方法是在vue.config.js中添加一些配置，其中使用了webpack的ProvidePlugin插件来提供全局的jquery变量。这样就能解决报错"ReferenceError: $ is not defined"的问题。中提到的报错提示不是由于没有使用lib:["dom"]造成的，而是在类型注释中使用了MouseEvent。在这种情况下，没有问题的。中指出，如果项目中引用了.eslintrc.js文件，还需要在文件的module.exports中为env添加一个键值对jquery: true，然后重新启动项目。这样也可以解决报错"ReferenceError: $ is not defined"的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue引入JQuery报错caught ReferenceError: jQuery is not defined](https://blog.csdn.net/qq_46034741/article/details/130032090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue ssr 报错 ReferenceError: MouseEvent is not defined / window is not defined 等等](https://blog.csdn.net/qq_28550263/article/details/130152398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue小知识： $ is not defined错误解决](https://blog.csdn.net/weixin_43945983/article/details/88294052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值