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

webpack --在TypeError中配置webpack.config.vendor.js结果: dep.getResourceIdentifiier不是一个函数

webpack是一个现代化的JavaScript应用程序的静态模块打包器(module bundler)。它主要用于将各种资源,如JavaScript文件、CSS文件、图片等,打包成一个或多个静态资源文件,以便在浏览器中加载。

在配置webpack时,可以通过webpack.config.js文件来指定打包的规则和配置。而webpack.config.vendor.js是一个特定的配置文件,用于指定打包第三方库或框架的规则和配置。

根据提供的错误信息,TypeError中配置webpack.config.vendor.js结果: dep.getResourceIdentifiier不是一个函数,可以推测出在配置文件中的某个地方使用了错误的函数名getResourceIdentifiier。

为了解决这个问题,可以按照以下步骤进行排查和修复:

  1. 检查webpack.config.vendor.js文件中是否存在名为getResourceIdentifiier的函数调用。确认函数名是否正确拼写为getResourceIdentifier。
  2. 如果函数名拼写正确,检查函数调用的上下文是否正确。可能是函数调用的上下文对象(dep)不正确导致了该错误。
  3. 确保在webpack.config.vendor.js文件中引入了正确的依赖和插件。有时候缺少依赖或插件可能导致函数调用失败。
  4. 检查webpack的版本是否过低或过高。某些函数可能在特定版本的webpack中被引入或移除。
  5. 如果以上步骤都没有解决问题,可以尝试重新安装webpack及其相关依赖。使用npm或yarn命令重新安装可以确保依赖的正确性。

总结起来,解决TypeError中配置webpack.config.vendor.js结果: dep.getResourceIdentifiier不是一个函数的问题,需要检查函数名拼写、函数调用上下文、依赖和插件的引入、webpack版本等方面,确保配置文件正确无误。如果问题仍然存在,可以尝试重新安装webpack及其相关依赖。

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

相关·内容

Vue老项目支持Webpack打包

/dist'), publicPath: '/dist/', filename: 'build.js' }, 但是现在默认配置会把index.html文件默认也打包进dist文件夹...需要实现修改webpack配置完成该功能。 2.遇到问题 很容易想到使用html-webpack-plugin默认。项目里面执行如下命令安装相应的npm模块。...重新安装3.2.0版本,命令如下: cnpm install html-webpack-plugin@3.2.0 --save-dev 再次执行npm run build命令,输入结果如下图所示,构建成功...打开dist文件index.html查看内容 这个Webpack App页面标题肯定不是我们想要的,当然html-webpack-plugin插件也支持通过参数设置标题,只要修改配置如下所示就可以了。...4.帮助链接 Webpack TypeError: Cannot read property 'make' of undefined问题 设置静态网站

63540

【前端】SourceMap帮助开发者调试代码

一、sourceMap帮助开发者调试代码 1.1 devtool配置 1.1.1 devtool:'none' devtool:'none' 报错提示: main.js:96 Uncaught TypeError...source-map 打包之后会生成一个.map文件,是打包文件与源文件的映射文件。.../dist', open:true, //server启动后打开浏览器 port: 3000, // 指定监听请求的端口号 }, 2.4 watch "watch":"webpack...--watch", 监听源代码是否变化,如果变化就重新打包,但是打包后的文件没有index文件,需要自己手动添加 三、请求转发 由于实际情况下,线上环境和本地环境不是一个地址,本地开发需要做代理...3.1 安装依赖 npm install axios --save-dev 3.2 配置webpack.config.js文件 devServer:{ contentBase:'.

90510

【JS】547- 200行JS代码,带你实现代码编译器(人人都能学会)

遍历过程,匹配每种字符并处理成「词法单元」压入「词法单元数组」,如当匹配到左括号( ( )时,将往「词法单元数组(tokens)「压入一个」词法单元对象」({type: 'paren', value...4.1 Webpack 构建流程分析 从启动构建到输出结果一系列过程: 「初始化参数」 解析 Webpack 配置参数,合并 Shell 传入和 webpack.config.js 文件配置的参数,形成最后的配置结果...「开始编译」 上一步得到的参数初始化 compiler 对象,注册所有配置的插件,插件监听 Webpack 构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译。...「完成模块编译并输出」 递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据 entry 配置生成代码块 chunk 。 「输出完成」 输出所有的 chunk 到文件系统。...注意:构建生命周期中有一系列插件在做合适的时机做合适事情,比如 UglifyPlugin 会在 loader 转换递归完对结果使用 UglifyJs 压缩「覆盖之前的结果」。

2.6K40

【图文详解】200行JS代码,带你实现代码编译器(人人都能学会)

遍历过程,匹配每种字符并处理成词法单元压入词法单元数组,如当匹配到左括号( ( )时,将往词法单元数组(tokens)压入一个词法单元对象({type: 'paren', value:'('})。...4.1 Webpack 构建流程分析 从启动构建到输出结果一系列过程: 初始化参数 解析 Webpack 配置参数,合并 Shell 传入和 webpack.config.js 文件配置的参数,形成最后的配置结果...开始编译 上一步得到的参数初始化 compiler 对象,注册所有配置的插件,插件监听 Webpack 构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译。...完成模块编译并输出 递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据 entry 配置生成代码块 chunk 。 输出完成 输出所有的 chunk 到文件系统。...注意:构建生命周期中有一系列插件在做合适的时机做合适事情,比如 UglifyPlugin 会在 loader 转换递归完对结果使用 UglifyJs 压缩覆盖之前的结果

3.1K00

字节前端面试题

,「只适用在开发阶段」关于配置方面,webpack配置对象属性通过devServer属性提供,如下:// ....跨域开发阶段, webpack-dev-server 会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在 localhost的一个端口上,而后端服务又是运行在另外一个地址上所以开发阶段...不过catch方法还有一个作用,就是执行resolve回调函数时,如果出现错误,抛出异常,不会停止运行,而是进入catch方法。...,全局范围内this 指向window对象;函数,this永远指向最后调用他的那个对象;构造函数,this指向new出来的那个新的对象;call、apply、bind的this被强绑定在指定的那个对象上...,而不是为每一个终端做一个特定的版本。

1.7K20

Vue2.0总结———vue使用过程常见的一些问题

可以进行配置配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题?...,   不会发生端口号冲突的情况,vue1.0会经常出现 3....: _vuex2.default.store is not a constructor   这个报错的是_vuex2.default.store 不是一个构造函数   因为我们用vuex的时候需要将用到的...actions,mutations模块最终导出,   导出的时候new Vuex.Store的Store小写了,这里的一定要大写,   就相当于我们使用构造函数(类)的时候首字母要大写   import...Moudel not found:Error:Can't resolve "style" in 'D:\vue-demo'  vue1.0webpack.config.js配置css文件时

1.7K30

聊一聊面试中经常被问到的Tree Shaking

import 'utils/refresh' 对于这种模块可以这样处理: sideEffects 通过数组声明,使其 Tree Shaking 的范围之外 模块改造,暴露成员支持显式调用 unused...一个函数会、或者可能会对函数外部变量产生影响的行为。 具有副作用的文件不应该做 tree-shaking,因为这将破坏整个应用程序。比如全局样式表及全局的 JS 配置文件。...关键是应用组件的业务项目里面配置optimization.sideEffects: true // webpack.config.js const path = require('path') const...如果你是一个第三方库的维护者,请人性化的按业界规范提供ES版本,同时配置 sideEffects: false....满足了文件要求后,简单来说你需要做如下配置操作 [x] package.json 文件中将 sideEffects 设为 false [x] 将css相关 loader sideEffects 设为

2K10

社招前端必会面试题

webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。...,如有需要可以自己封装一个函数来实现。...描述一下npm run dev / npm run build执行的是哪些文件通过配置proxyTable来达到开发环境跨域的问题,然后又可以扩展和他聊聊跨域的产生,如何跨域最后可以聊聊webpack...通过自定义 set 和 get 函数的方式,原本的逻辑插入了我们的函数逻辑,实现了在对对象任何属性进行读写时发出通知。...call 传入的参数数量不固定,跟 apply 相同的是,第一个参数也是代表函数体内的 this 指向,从第二个参数开始往后,每个参数被依次传入函数。说一下data为什么是一个函数不是一个对象?

65420

webpack + vuecli多页面打包基于(vue-template-admin)修改

遇见的问题TypeError: Cannot read property ‘tap’ of undefined 先看项目目录结构 :关于项目的修改及改造 再项目完事的时候会发布的 如果你也遇见这个问题的话...以下是我的解决思路 第一点 : 检查入口文件 是不是有多余的东西 打印结果如下 : 对比图 在这里我们发现入口文件 多了几个js 分别是 errorLog.js 和 permission.js...所以我们要做的操作是 将多余的js删除 入口函数写法如下 //多入口配置 // 通过glob模块读取views文件夹下的所有对应文件夹下的js后缀文件,如果该文件存在 // 那么就作为入口处理 exports.entries...打包主要就是入口和出口 接下来我们研究下出口文件函数 我一开始写法如下 : //多页面输出配置 // 与上面的多页面入口配置相同,读取pages文件夹下的对应的html后缀文件,然后放入数组 exports.htmlPlugin...第一步 webpack.dev.conf.js 里修改 plugins: [ new webpack.DefinePlugin({ 'process.env': require(

11910

webpack处理less的loader_登录器和引擎版本号不匹配

昨天遇到这样一个问题 按照上面的方法都试了一下 仍然解决不了 - Delete package-lock.json (not package.json!)...首先第一种 第三步的时候我并没有package.json中找到webpack配置项,就跳过继续第四步,结果没解决 指定版本号下载 指定版本号全局卸载再下载 都不能解决 接着就注意到是不是npm i和...npm i -s的原因,用npm i -s重复上面的操作 仍然不行 主要还是没有成功配置package.json没有webpack配置项,具体什么原因我也不清楚 其中还出现了下面这个问题 internal...安装之后根本和主要问题没关系 webpack版本仍然存在问题 其中还去手动更改了node_modules/webpack/package.json里面配置项——不行 根据上面提示的第二种方法 If...webpack@4.44.2的时候package.json不显示"webpack": "^4.44.2"难道我当时思绪混乱了一直想着全局问题,而这个是局部安裝去解决我没有这样执行过,一直npm i

68620

webpack2 的 tree-shaking 好用吗?

本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载 代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码并没有对依赖图中标识的模块... webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况,虽然依赖了某个模块,但其实只使用其中的某些功能。...比如示例2,函数的原型链上添加了方法,在这个场景下,B 其实应该被删除掉,但是换一个场景,比如王 Array 的原型链上加一个 unique 方法: function B() { } B.prototype.render...,跟示例 2 类似的代码了,B 是一个自执行的函数,带有副作用,所以并不能被安全的移除。...总结 查看其它使用 tree-shaking 的例子,能达到效果的都是使用函数来组织模块的,比如 webpack example: harmony-unused 。

1.5K30

webpack学习简单总结

要是css引入正确:必须引入css-loader,要使改变的css生效,要引入style-loader; 各个js的函数调用只能在各自的函数写,引入只是合并的意思,但并不能直接使用引入的js的函数。...的script下,定义一个webpack属性,后面定义所有要输入的webpack的命令,定义好之后,命令窗口 运行 命令 npm run webpack即可,定义方式与定义npm run dev的...webpack 配置文件 报错: output输出的路径写成这样: 而不是这样: webpack打包完成之后,显示打包成功,但是并没有生产打包的文件和文件夹,所以这里path中切记首先要写__dirname...webpack配置modules增加属性plugins,用来初始化插件。...htmp-webpack-plugin】 多页面配置:chunk:[] plugin是一个数组,如果要打包成多个页面,只需写多个创建插件对象的实例,给每个实例里写chunk属性,该属性是一个数组,每个数组里对应的

1.2K60

vue中使用element-ui自定义主题后,vue-cli跑不起来了

环境:vue-cli 2.x版本 自己官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢!...' of undefined 原因: 我项目下放了一个config.json文件,他是element-ui的自定义主题配置文件。...但是我现在在build上一级(根目录下)放了config.json。他优先引入了config.json文件。 打印结果证实了我的猜测:下边的对象就是config.json里边的代码 ?...再打印,这里就没问题了,内容就是config文件夹的index.js的内容: ? 但是又来了新问题,换了新的页面webpack.base.conf.js:19 ?...修改这里的路径,顺便把webpack的其他配置文件config/index.js的引入也修改一下: ? 以下三个文件中都有同样的问题: ? 还有utils里边也用到了。也得改。

1.3K20

webpack2 的 tree-shaking 好用吗?

代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很不合理的。... webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况,虽然依赖了某个模块,但其实只使用其中的某些功能。...实际效果如何 所有示例 tree-shaking-demo 示例 1 main.js import { A } from '....比如示例2,函数的原型链上添加了方法,在这个场景下,B 其实应该被删除掉,但是换一个场景,比如王 Array 的原型链上加一个 unique 方法: function B() { } B.prototype.render...,跟示例 2 类似的代码了,B 是一个自执行的函数,带有副作用,所以并不能被安全的移除。

1.5K50

腾讯前端一面常考面试题_2023-03-13

+ webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。...webpack.config.js部分配置:module.exports = { entry: {}, module: {}, ......,该方法接受一个由Promise对象组成的数组作为参数(Promise.all()方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例),注意参数只要有一个实例触发...②Promise 与事件对比和事件相比较, Promise 更适合处理一次性的结果结果计算出来之前或之后注册回调函数都是可以的,都可以拿到正确的值。 Promise 的这个优点很自然。...constructor和instanceof 的作用是不同的,感性地来说,constructor的限制比较严格,它只能严格对比对象的构造函数不是指定的值;而instanceof比较松散,只要检测的类型原型链上

1K40

拿到大厂前端offer的前端开发是怎么回答面试题的

用户可以消息队列添加消息、读取消息等。消息队列提供了一种从一个进程向另一个进程发送一个数据块的方法。 每个数据块都被认为含有一个类型,接收进程可以独立地接收含有不同类型的数据结构。...参考:前端进阶面试题详细解答webpack配置入口出口module.exports={ //入口文件的配置项 entry:{}, //出口文件的配置项 output:{},...描述一下npm run dev / npm run build执行的是哪些文件通过配置proxyTable来达到开发环境跨域的问题,然后又可以扩展和他聊聊跨域的产生,如何跨域最后可以聊聊webpack...,而使这个变量一直留在内存无法被回收2、被遗忘的计时器或回调函数:设置了 setInterval 定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存,而无法被回收...constructor和instanceof 的作用是不同的,感性地来说,constructor的限制比较严格,它只能严格对比对象的构造函数不是指定的值;而instanceof比较松散,只要检测的类型原型链上

58630

Web前端开发高级前端技术(高级开发程序篇)

= require('webpack-spritesmith'),最后配置文件添加代码。...webpack接入UglifyJS需要通过插件的形式,UgllifyJsPlugin是比较常用的插件,通过webpack配置文件webpack.config.js中加入以下代码即可。...webpack-dev-server运行后,浏览器输出的页面,都是运行在内存的,只有build以后,才会在dist目录得到最终的结果文件。...箭头函数的this ​ ? 函数的扩展 ​ ? ​ ? 对象的扩展 es6允许向对象直接写入变量和函数,作为对象的属性和方法。...yield表达式Generator是作为一个暂停标志,当碰到yield时,函数暂停执行,等到下一次next()执行时,函数才从当前yield位置开始执行。 ​ ? ​ ? ​ ?

2.3K10
领券