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

错误:在require.resolve( 'jquery‘)上找不到模块’jquery‘,webpack

错误:在require.resolve( 'jquery‘)上找不到模块’jquery‘,webpack

这个错误是由于在webpack中尝试使用require.resolve('jquery')来解析模块时找不到jquery模块引起的。解决这个错误的方法有以下几种:

  1. 确保已经安装了jquery模块:在项目根目录下执行npm install jquery命令来安装jquery模块。
  2. 确保webpack配置文件中正确配置了解析模块的规则:在webpack配置文件中,可以通过resolve.alias或resolve.modules配置项来告诉webpack如何解析模块。例如,可以添加以下配置来告诉webpack在解析模块时查找node_modules目录:
代码语言:txt
复制
resolve: {
  modules: ['node_modules']
}
  1. 确保在代码中正确引入了jquery模块:在代码中使用require('jquery')或import $ from 'jquery'来引入jquery模块。
  2. 确保jquery模块的版本兼容性:有时候,使用的jquery版本可能与webpack不兼容,可以尝试更新jquery版本或使用兼容的版本。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供弹性计算能力,满足各种业务需求。产品介绍链接
  • 云数据库 MySQL 版(CDB):提供高性能、可扩展的关系型数据库服务。产品介绍链接
  • 云存储(COS):提供安全、稳定、低成本的对象存储服务。产品介绍链接
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能算法和模型,帮助开发者快速构建智能应用。产品介绍链接

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

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

相关·内容

4-11 shimming 的作用

现在我们试着调整 ui, 去掉对 jquery 的引用, index 将其引入会如何呢?...image.png 发现即使入口 index 引入 jquery,但是 ui 找不到该变量,这还是因为模块引入变量的作用范围是模块内,正确的用法是哪里使用,就在哪里引用(虽然webpack 底层只会对相同模块加载一次...使用 ProvidePlugin 后,能够通过 webpack 编译的每个模块中,通过访问一个变量来获取到 package 包。...如果 webpack 知道这个变量某个模块中被使用了,那么 webpack 将在最终 bundle 中引入我们给定的 package。...image.png 本质,我们所做的,就是告诉 webpack,如果你遇到了至少一处用到 lodash 变量的模块实例,那请你将 lodash package 包引入进来,并将其提供给需要用到它的模块

79520

看啥双拱门,来学 webpack 3啊

例如: window.jQuery = { //xxx } webapck 会直接处理 window 或者 global 对象进行模块化包裹。否则,则不会对指定模块进行 externals 处理。...key: 具体指代,经过 value 处理过后的外部库,能够 webpack 通过 require 或者 import 的包名,例如: externals: { $: "jQuery"...,直接绑定在 this 全局中直接使用 this.xxx 来进行模块调用。...function(content) { return /jquery|lodash/.test(content); } 这样,jquery 和 loadsh 就不会被 webpack 中的 loaders...这样,进行模块查找的时候,webpack 会优先遍历你定义的目录。如果,你还有自定义模块 src 目录下,通过普通模块解析是找不到的,这时候可以直接在 modules 中添加 src。

94420
  • 解决innerHtml Jquery使用无效果的问题

    document.getElementById("timeShow").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒"; 或 使用Jquery...的方式: $("#timeShow").html('加载本页耗时 ' + loadTime + 'ms'); innerHTMLJQuery中使用的话是无效果的, JQuery提供了三种方法实现指定标签赋内容...三种方法区别具体: .html()用为读取和修改元素的HTML标签 对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签), .html()方法使用在多个元素时....val()用来读取或修改表单元素的value值 .val()是用来读取表单元素的"value"值,.val()只能使用在表单元素 关于三者的区别 .val()方法和.html()相同,如果其应用在多个元素时...,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素时,将会读取所有选中元素的文本内容。

    41310

    【Hybrid开发高级系列】WebPack模块化专题

    /webpackConfig/dev.config.js         另外,CLI执行webpack指令时可传入的参数(当然除了--config)实际都可以配置文件里面直接声明,我强烈建议可以的话尽量都在配置文件里写好...Angular自己有自己独特的依赖注入以及模块声明方式,看起来似乎和Webpack是水火不容的,但事实他们完全可以融合。...        test:require.resolve('jQuery'),          // 先把jQuery对象声明成为全局变量`jQuery`,再通过管道进一步又声明成为全局变量`$`...现在,我们开发期间就知道是否错误地引用了模板,而不会在构建时才发现引用路径偏移了一个目录级别。         .../lock/lock.js ');         若在module初始化之前做require子模块动作,则必定报错“找不到login module”,因此如果是同步引用(当然也可以用异步加载方式),则必须将其放在

    37050

    webpack入门——webpack的安装与使用

    你可以不打算将其用在你的项目,但没有理由不去掌握它,因为以近期 Github 各大主流的(React相关)项目来说,它们仓库所展示的示例已经是基于 webpack 来开发的,比如 React-Boostrap...JS 各脚本模块可以直接使用 commonJS 来书写,并可以直接引入未经编译的模块,比如 JSX、sass、coffee等(只要你 webpack.config.js 里配置好了对应的加载器)。...: require.resolve("....这时候我们可以配置文件里使用 externals 属性来帮忙: { externals: { // require("jquery") 是引用自外部模块的 //...对应全局变量 jQuery "jquery": "jQuery" } } 需要留意的是,得确保 CDN 文件必须在 webpack 打包文件引入之前先引入。

    1.4K80

    从零搭建一个 webpack 脚手架工具(三)

    webpack-merge 使用 webpack-merge 插件可以让不同环境的 webpack 配置分别写在不同的文件。...// base 中的配置项会被覆盖 }); 生产环境配置 在生产环境主要是让代码压缩,而 webpack 打包压缩后的代码基本不具有可读性,如果此时代码抛出错误是很难找到原因的。...,webpack 会检测这个模块有没有依赖别的模块,如果没有依赖别的模块,可以使用 noParse 配置项让 webpack 不再做多余的解析。...noParse: /jquery/ 表示不再解析 jquery 模块。 ignorePlugin webpack 的一个内置插件。该插件可以忽略掉指定的文件。...需要注意的是,如果使用 es6 的 export default 形式进行导出,会把导出的模块放在 default 属性

    1.4K10

    找一份相对完整的Webpack项目配置指南么?这里有

    ,loader要设置options的就换成数组的方式吧 或者使用多个loader的时候,也用数组的形式,规则不要用{ }留空,windows下虽然正常,但在Mac下会报错提示找不到loader 多个loader...__img').length); 第三种办法,可以模块内部直接引入jQuery插件,也可以直接在页面通过标签引入jQuery插件,而jQuery本身由Webpack的loader导出为全局可用...{ test: require.resolve('jquery'), // 将jQuery插件变量导出至全局,提供外部引用jQuery插件使用...--config webpack.config.dev.js 要记住,devServer编译的模块是输出在服务器的(默认根目录),不会影响到本地文件,所以要在页面上手动设置一下引用的资源 <script...不要在命令行加参数 --hot 和 new webpack.HotModuleReplacementPlugin() 同时使用,会栈溢出错误,只用配置文件的就行了 另外,默认是只能模块热替换,如果也想监听页面文件改变来实现

    3.5K10

    Webpack 实用技巧高效实战

    搭建好配置和架构之后,开发过程中可以不再关注模块的组织、载入、转义、合并、精简、兼容等各种方面的工程问题,全部交给 Webpack 来处理。效率和体验都得到了不小的提升。.../web_modules/seajs-loader.js" ) } } 如果你的项目有引用根路径上级的模块(依赖路径根路径之上),可能会出现找不到 loader 的情况,需要在 resolveLoader.root.../node_modules' ) } 三、关于全局模块/全局变量/环境变量: 如果习惯了使用全局模块,例如 jQuery 的 $,而不想每次都写 $ = require('jquery'), 可以使用...ProvidePlugin 插件: plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })...要注意的是:如果没有指定 target 为 node,而代码里有 require Node 的原生模块(例如http、url等)但又没有设置 Alias,也就是找不到这些模块时,Webpack 会尝试一个兼容逻辑

    1.6K90

    npm详解

    一个网站里通常有几十甚至上百个package,分散各处,通常会将这些包按照各自的功能进行划分(类似安卓开发中的划分子模块),但是如果重复造一些轮子,不如上传到一个公共平台,让更多的人一起使用、参与这个特定功能的模块...在生产环境下,一般会关掉错误报告,打开错误日志等操作。 devDependencies 配置的是开发环境,安装项目开发时所依赖的模块。...比如像webpack工具,只是用来构建项目和打包,这些都是开发阶段才使用的,等项目上线后就用不到webpack工具了,那么就可以把webpack安装到开发环境中,使用 --save-dev 命令安装到...使用的一些构建工具例如glup、webpack这些只是开发中使用的包,上线以后就和他们没关系了,所以将它写入devDependencies 指定安装包的版本 npm install jquery@...,找不到就报错 const $ = require( 'jquery ' ); console.log($.addclass());

    1.5K11

    Webpack搭建ES6开发环境(部分摘自网络)

    打开命令提示符,执行: cd myapp 依次完成以下操作: 第一步 安装模块 创建package.json文件 # 手动配置 npm init # 自动配置 npm init -y 安装webpack...D 命令安装; 生产环境,项目上线后开始正式提供对外服务的阶段仍然需要依赖支持,例如:jQuery库、路由等,使用 --save 或 -S 命令安装; 第二步 创建目录结构 项目的目录结构为: myapp...该文件为项目的入口文件,在此文件中可以编写ES6代码 [1,2,3,4,5].map(item=> console.log(item)) 项目的根目录下创建webpack.config.js配置文件,...babelrc: false, presets: [ [require.resolve...-D webpack.config.js文件中配置本地服务相关信息 module.exports = { // ...

    26030
    领券