webpack 模块循环引用处理方案 报错处理方案

最新推荐文章于 2025-03-20 12:15:00 发布
最新推荐文章于 2025-03-20 12:15:00 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： webpack 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gaoqiang1112/article/details/105412329
版权

问题

index.js 入口文件   引入a 并调用方法

a.js 文件 引入b.js 然后调用b内的方法

b.js 文件 引入a.js 然后调用a内的方法

当你正常 打包后   打开html页面的时候

控制台报错  

原因就是循环引用 导致的 

解决办法

直接上 插件  circular-dependency-plugin

在webpack的 plugin里 使用插件

当你在 打包的时候  控制台会直接 输出  引入循环错误

利用这个插件 我们就可以 迅速 找到 循环引入的问题点  然后解决了

如果有更好的 方式 或不对的地方  欢迎留言

前端领域Webpack的打包过程中的错误排查
前端视界的博客
04-09 752
本文旨在为前端开发者提供一套完整的Webpack打包错误排查方法论。Webpack核心工作机制解析常见打包错误分类体系模块解析失败的根本原因Loader和Plugin配置陷阱性能瓶颈识别与优化高级调试技巧和工具链第2章解析Webpack核心概念，建立理论基础第3章详细拆解打包流程中的关键算法第4章提供数学模型帮助理解模块解析机制第5章通过实际案例演示错误排查过程第6-7章提供实用工具和资源推荐第8章展望未来发展趋势Entry。
webpack5打包生成文件分析（commonjs和es6模块系统）
weixin_41837346的博客
01-16 1687
目录相关配置生成文件分析es6模块和commonjs模块输出值es6模块和commonjs模块动态加载es6模块和commonjs模块循环引用参考链接demo 相关配置 webpack5 // webpack.config.js module.exports = { mode: 'none' } // index.js import str from "./main.js"; console.log(str); // main.js export default "hello leo~"; 生成
vue 解决循环引用组件报错的问题
10-18
今天小编就为大家分享一篇vue 解决循环引用组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
webpack针对循环引用以及赋值export的处理注意事项
weixin_34161029的博客
03-09 2005
webpack打包相互引用的模块 示例项目 遇到的问题 为什么会出现这样的问题 如何解决 webpack打包相互引用的模块 示例项目 (github) 遇到的问题 在有2个或2个以上的文件之间的相互依赖关系构成闭环的时候，有时会出现Can't read Property 'xxx' of undefined或者(0,xxx) is not a function这类的错误，比如： 示例项...
前端开发中深拷贝的循环引用问题：从问题复现到完美解决
最新发布
Micro麦可乐的博客
03-20 3444
今天在公司进行某功能复盘的过程中，前端的小伙伴编写的某个方法中对数据进行了深拷贝功能，只要进入该方法就会出现Maximum call stack exceeded（超出调用栈）错误，其次使用JSON.parse序列化时也会出现错误，这里博主特做一次记录，方便大家避雷！之所以出现超出调用栈错误，因为深拷贝的本质是递归地复制对象及其嵌套的所有属性 ，确保新对象与原对象完全独立。当对象中存在循环引用时，传统的递归深拷贝方法就会陷入无限循环。
组件之间的循环引用，报未注册
rongyi2233的博客
12-31 604
组件之间的循环引用 当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！当通过 Vue.component 全局注册组件的时候，这个悖论会被自动解开。如果你是这样做的，那么你可以跳过这里。 然而，如果你使用一个模块系统依赖/导入组件，例如通过 webpack 或 Browserify，你会遇到一个错误： Failed to mount component: template or render function not defined. 为了解释这里发生了什么，我们先把两个组件称
使用 Webpack 时需避免循环引用
weixin_33739523的博客
03-01 1186
开发日历控件的时候，对方变更了一下需求，基本上将最终产品分成两个： 选择连续时间段 选择多个不连续时间 那么我们知道，对于这种大部分功能一致，只有若干函数逻辑不同的产品，最合适的就是状态模式。于是很自然的，我就拿“2”作为标准模式，“1”作为新模式，将其重构成父类和子类，大概关系如下： // 父类 // DatePicker.js ...
webpack打包报错处理
qwx_qidian的博客
05-19 4870
目录 故障 解决方案 故障 控制台运行webpack时出现 ERROR in (webpack)-dev-server/client?http://localhost:9003 Module not found: Error: Can't resolve './overlay' in 'D:\xxx\node_modules\ webpack-dev-server\client' @ (webpack)-dev-server/client?http://localhost:9003 10:14
深入分析JavaScript模块循环引用
公众号：该用户快成仙了
08-18 2077
背景 大力教育的在线教室中台提供封装了核心能力的教室 SDK，业务方基于教室 SDK 开发面向用户的在线教室 App。最近对教室 SDK 做一次比较大的改动时，我遇到了一个懵逼的问题。这个问题耗费了我 3 天左右时间，让我压力一度大到全身发热。当时虽然解决了问题，但并没有很理解原因。直到一个多月后，才有时间做一些更深入的分析，并写下这篇文章。 当时的情况是，业务方 App 工程能通过 TypeScript 编译，但在运行时会报错。就不同的使用教室 SDK 的方式，报错有两种。图 1 为在业务方 App
循环依赖和模块初始化顺序的处理
在模块A中引用了模块B，在模块B中又引用了模块A，这种情况就构成了循环依赖。 ## 1.2 模块初始化顺序的重要性 模块初始化顺序指的是在系统启动或模块被调用时，各个模块按照一定的顺序进行初始化的过程。如果模块...
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
淡水瑜的博客
06-20 1735
大前端
循环依赖插件：在使用Webpack编译的模块中检测循环依赖
02-06
循环依赖插件 与webpack捆绑时，检测具有循环依赖性的模块。 循环依赖关系在复杂软件中通常是必需的，循环依赖关系的存在并不总是意味着存在错误，但是在您认为存在错误的情况下，此模块可能会帮助您找到它。 Webpack版本 该插件5的最新主版本支持webpack 4.0.1和更高版本，作为对等依赖项。 此插件及更低版本的主要版本4旨在作为对等依赖项支持webpack 3.xx及更低版本。 基本用法 // webpack.config.js const CircularDependencyPlugin = require ( 'circular-dependency-plugin' ) mod
循环引用的处理
weixin_34174422的博客
12-09 176
循环引用：两个类互相引用，导致单纯互相引用头文件，编译无法通过。 解决方案： 首先，要理解声明和实现之间的差别。声明只需要在使用类的前面添加class ***，而实现是包含具体成员函数和变量的类。 如例1. class A { ... private: B b; } class B { ... private: A a; } 1. 此时可在A的前面声...
c++ main如何引用class_webpack 的 import 循环引用，导致变量为空
weixin_42356315的博客
12-21 291
前言记得两三年前，刚试手用 webpack 构建一个 web 项目，就遇到了个坑：import 的 js 文件其引用居然是 undefined。那时工期也不是很充裕，为了解决 bug，把导入的 js 直接 copy 到当前文件，代码肯定是冗余了，但至少解决了问题。谁知，今年居然遇到了两次类似的问题(死鱼脸)，还是印证了那句：出来混的，有些债迟早要还的！我尝试百度了下，都没有靠谱的解决方案，很崩溃：...
es6模块循环引用的问题
醉逍遥neo的博客
02-11 9485
起因是开发时的一个报错信息：Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization。 由于报错信息不明确，网上也搜不到明确的原因解释和解决方法，所以自行排查了很久才逐渐找到原因。要说怎么排查，就是最笨的也是最有效的“代码删除法”，即从入口文件开始一行行删代码，直到定位到具体出错位置，然后凭借自身知识和经验判断出问题原因。 原因就是import的循环引用导致webpack无法正确解析。 一、循环引用简介 最简单的 a 引用了 b，b 又
Vue学习笔记之Webpack的plugin的应用
医疗数据
09-06 436
1、概念：插件，它是对webpack本身的扩展，是一个扩展器，让webpack变得更加好用。 2、版权声明插件：BannerPlugin，但这个是webpack是自带的，所以可以不需要进行安装，在项目配置文件直接引用一下即可：const webpack = require（‘webpack’） 然后重新打包项目，在生成的js文件中增加一行版权申明： 3、打包HTML的插件：我们的目录结构中，index.html文件是在项目的根目录下的，在打包文件dist中是没有这个文件的，所以我们需要将ind
从Webpack的同步/异步加载到加载顺序到循环依赖到开发习惯
weixin_42274805的博客
03-22 1575
前言 webpack为了解决前端的模块化开发，有了 webpack，我们可以不用再担心浏览器的兼容性问题，直接就能编写基于 CommonJS 或是 ES6 module 的代码，这些代码经过 webpack 构建后，就可以直接在浏览器中运行了。 默认情况下，无论对于 CommonJS（require） 还是 ES6 module（import），webpack 都是采用 CommonJS 方式来实现模块的同步加载。 Webpack如何实现CommonJS的加载 先写个工具函数JS //
webpack打包的ES6代码，import获取的值为空/undefined
weixin_44525651的博客
07-07 1784
转载自 millzhang 这个问题查了会资料，就自问自答了,以供参考： 首先，webpack，默认打包结构是一个闭包，然后模块是作为闭包的参数列表，是个数组，每一项也是个匿名函数，具体参考链接 暴露出的对象，都在闭包中，应该是导致拿不到值的根本原因（后续还需具体跟踪！）。 解决方案： 参考官方文档：Output | webpack 有一个libraryTarget的属性，作用是定义模块运行的方式，将它的值设为umd，则问题解决！ 打开webpack.config.js 文件修改即可 ...
webpack打包vue提示错误：(node:20752) UnhandledPromiseRejectionWarning: Error: Cyclic dependency
热门推荐
王小鬼的博客
11-13 1万+
错误提示： (node:22248) UnhandledPromiseRejectionWarning: Error: Cyclic dependency   错误：循环依赖   webpack4打包vue2时，碰到的致命bug，开发环境是正常的，就是打包发布时提示循环依赖错误，在国内百度了半天，没找到解决办法，后来还是到国外找我哥解决的。在此记录一下！ 据我哥说，问题是因为HtmlWe...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值