webpack编译打包出现的问题!

最新推荐文章于 2023-02-21 17:14:28 发布
最新推荐文章于 2023-02-21 17:14:28 发布
阅读量332 收藏
点赞数
文章标签： webpack ViewUI
原文链接：https://my.oschina.net/kaykie/blog/1827476
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

最近使用webpack打包编译文件的时候,遇到个奇怪的问题,找不到源头,具体报错如下:

b0609e3d1726494ad24d4c67e71eb2e9890.jpg

点进去后:

2f7bda1dea3e3de5e857126f9707b92bb51.jpg

为这样的!看着像moment.js的问题,然而并不是,在其它项目中也有使用到这个插件,也是用的好好的,而且这个错误是突然出现的,之前在使用的时候都是正常的.

还有在之前也有出现过一个 报错都差不多,叫call() is not a function;

也试过把commont.js加入到其它文件,确实这个页面也报错了,但是这并不是问题的根源,于是继续找:

后来经过排查:是两个common.js的冲突,从webpack打包的时候,会生成一个common.js的javascript文件,我们自己在测试环境的项目中实际也引用了一个common.js,这样就导致了一些问题,前面的common.js对外暴露的变量会被后面的替换了一些函数,然后在项目中引用的时候,便报错了!

非常奇葩的问题,引以为戒!

 

转载于:https://my.oschina.net/kaykie/blog/1827476

weixin_33725722
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack+antd+fetch 通讯 , 打包上线
weixin_44160385的博客
07-22 435
webpack+antd+fetch 通讯 1. 引入安装fetch import "whatwg-fetch" import "es6-promise" 2. 在utils中配置fetch文件，定义了一个get请求和post请求的方法，因为内部是promise封装的所以返回的是一个promise对象，通过.then接收 具体代码 get 方法 export function get(url...
webpack自动编译工具
weixin_45290022的博客
05-11 309
webpack中有几个不同的选项，可以在代码发生变化后自动编译代码： 1、watch 2、webpack-dev-server 3、webpack-dev-middleware watch 用法1：在webpack指令后边加上--watch参数即可 作用：监视本地项目文件的变化，发现有修改的代码会自动编译打包，生成输出文件 具体操作步骤： 1、配置package.json的scripts中的"webpack --watch" 2、运行npm run watch 代码如下： "scripts": {
webpack当打包的依赖文件被修改时自动重新编译 自动刷新浏览器运行效果 (WebpackDevServer)
weixin_45966674的博客
01-26 2457
这篇文章会基于我 (webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)) 这篇文章搭建的项目环境开展 没有看过这篇文章的话，建议去看一下 https://blog.csdn.net/weixin_45966674/article/details/122695188?spm=1001.2014.3001.5501 首先我们在项目终端执行 npm install webpack-dev-server --save 将webpack-dev-ser
__webpack_require__(...) is not a function vue报错
muzidanwu的博客
04-08 4676
使用npm install vue-router 安装的router 报错__webpack_require__(...) is not a function，可能是router和webpack的版本不匹配，后执行npm i vue-router@3.2.0，将router的版本换到了3.2.0，重新npm run dev不报错了。
提升webpack编译速度
风烟
11-15 726
我们本地开发的时候可以在node.env上定义变量，然后在使用webpack编译的时候根据本地的环境变量，然后做编译的简化需求。 贴上代码 let entry = { xxx: './src/xxx', xxx: './src/xxx', xxx: './src/xxx', xxx: './src/xxx', xxx: './src/xxx' }; fun...
webpack dll打包重复问题优化的解决
10-17
webpack DLL打包重复问题的优化主要涉及到在使用webpack的DllPlugin时，如何避免生成的DLL包中包含重复的代码。DLL（Dynamic Link Library）打包是为了提高构建速度，它将常用的库预先打包成一个独立的文件，后续的...
Webpack打包慢问题的完美解决方法
08-31
Webpack 打包慢问题的完美解决方法 在使用 Webpack 打包项目时，经常会遇到打包速度慢的问题，这是因为 Webpack 需要处理大量的模块，从而导致打包速度慢。为了解决这个问题，我们需要了解 Webpack 的工作原理和...
详解如何使用webpack打包JS
01-19
如何使用webpack打包JS 我们在命令行中输入：webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output webpack-cli [options] <entries> --output ...
webpack4.0打包优化策略整理小结
08-27
可以通过 cacheDirectory 选项来缓存 loader 的执行结果，减少 webpack 构建时 Babel 重新编译过程。例如： ```javascript module: { rules: [ { test: /\.js$/, use: 'babel-loader?cacheDirectory', // 缓存 ...
Webpack打包实例测试代码
03-28
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，通过将各种资源（如JavaScript、CSS、图片等）转换并打包成更小、更优化的文件，提高了网页应用的加载速度和整体性能。在...
webpack打包常见报错解决方案
qq_28749759的博客
02-21 1354
学习过程问题总结
vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function报错怎么处理
sassssiii的博客
03-23 4870
如何解决vue中插件的不匹配问题
webpack(四) webpack5新特性
OriginalMIxss的博客
11-15 1928
总览 webpack5 在 2020-10-10 已经正式发布，其优化方向： 使用持久化缓存提高构建性能 使用更优的算法和默认值改进长期缓存 优化 Tree Shaking 和代码生成以改善包大小 改善web平台兼容性 去除弃用功能 另外 webpack5 要求 node的最小的版本为 10.13.0 长期缓存 开发支持 支持崭新web平台特性 支持全新Node.js生态特性解析 构建优化 性能优化 未来计划 主要优化新特性： 1 功能清除 1.1 不再为Node.js模块自动引用 Polyf
webpack编译报错
apple_51274791的博客
05-12 416
webpack版本号 "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.9.0", 报错信息 原因node版本过低,切换12.11.0版本可以启动 webpack-dev-server v4.0.0+ 要求 node >= v12、webpack >= v4.37.0
一些webpack常见编译报错的解决方案
weixin_30337157的博客
07-13 536
重新安装依赖可以解决80%的webpack编译报错问题。 rm -rf node_modules rm package-lock.json npm cache clear --force npm install 引起报错的一些常见原因 移动了项目的路径，比如说从D盘移动到了E盘。原因：使用npm安装依赖时，会记录node_nodules里文件的当前路径，这个路径是写死的绝对路径，不会跟随项目移动而...
webpack打包后的文件夹是空的_webpack初级入坑之路
weixin_39649736的博客
12-19 887
接下来这几章,我们就和webpack死磕到底。学之前,还是我们的经典三问webpack是什么吗为什么要学webpack怎么学webpackwebpack是什么吗?先来个权威解释本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包...
webpack编译多页面vue项目的配置问题
wang839305939的博客
07-17 5391
一般情况下，构建一个vue项目的步骤为： 1，安装nodejs环境 2，安装vue-cli cnpm install vue-cli -g 3，构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4， 安装项目依赖包 cnpm i
webpack 打包错误
qq_34258593的博客
07-23 3049
报错   $ webpack dev D:\server\mmall-fe\node_modules\_webpack-cli@3.1.0@webpack-cli\bin\cli.js:244 throw err; ^ Error: invalid "instanc...
解决webpack打包慢的解决办法汇总
热门推荐
苍天的懒腰的博客
07-01 1万+
刚开始用webpack，谈一谈解决webpack打包慢的问题的方法技巧1webpack在打包的时候第一次总是会做很长的准备工作，包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下，这种方式最后让很多人崩溃了觉得webpack一点都不好用。其实这是错误的使用方式。 正确的方式应直接执行webpack --watch 这样webpack会自动编
webpack编译打包，如何解决依赖的依赖 is not a constructor
最新发布
05-26
这个错误通常是因为依赖的模块没有正确导出导致的。可以尝试以下几个解决方法： 1. 确保依赖的模块已经正确安装，并且版本正确。 2. 检查依赖的模块是否正确导出了需要的对象或方法，可以在依赖的模块中打印一下需要导出的对象或方法，看是否正常输出。 3. 可以尝试升级 webpack 的版本或者更换其他的打包工具来进行打包，有时候这个错误可能是 webpack 的一些 bug 导致的。 4. 如果使用了 babel 进行编译，可以检查 babel 配置是否正确，是否包含了需要的插件和 presets。 5. 如果使用了 TypeScript 进行编译，可以检查 tsconfig.json 文件是否正确配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值