首页
学习
活动
专区
圈层
工具
发布

webpack编译打包出现的问题!

最近使用webpack打包编译文件的时候,遇到个奇怪的问题,找不到源头,具体报错如下: ? 点进去后: ? 为这样的!...看着像moment.js的问题,然而并不是,在其它项目中也有使用到这个插件,也是用的好好的,而且这个错误是突然出现的,之前在使用的时候都是正常的....还有在之前也有出现过一个 报错都差不多,叫call() is not a function; 也试过把commont.js加入到其它文件,确实这个页面也报错了,但是这并不是问题的根源,于是继续找: 后来经过排查...:是两个common.js的冲突,从webpack打包的时候,会生成一个common.js的javascript文件,我们自己在测试环境的项目中实际也引用了一个common.js,这样就导致了一些问题,...非常奇葩的问题,引以为戒!

1.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一步一步带你搭建一个“摩登”的前端开发环境

    js 类型系统 最近纠结一个问题,前端的 js 由于其动态的特性,写几行代码,在浏览器刷新一下就能看到结果了,非常适合快速开发和迭代。...这里我采用的 webpack babel 作为我们构建环境,所以首先我们需要安装 webpack 和 babel $npm install webpack babel-core babel-loader...webpack 的配置文件 webpack.config.js module.exports = { entry: "..../node_modules/.bin/eslint --init 这时 eslint 就会问你一些问题,一步步帮你完成初始化的工作,并生成对应.eslintrc 文件,这时候,我们需要更新一下 webpack.config.js...版 js 解析器 babel-eslint,这是由于 eslint 默认的 espree 解析器认不得 flow 的类型声明 $npm install eslint-plugin-flowtype babel-eslint

    2.6K00

    我是如何调试 Webpack 问题的

    webpack-dev-server 版本为 3.11.2 看了半天,没问题呀,给了几个纸糊的建议还是解决不了问题,刚好在开会这事就暂且放下了。...第一步:定义问题 先复盘一下问题发生的过程: webpack.config.js 同时配置了 ouput.publicPath 与 devServer 运行 npx webpack serve 启动开发服务器...所以问题的核心就是:「为何 Webpack 的 output.publicPath 会影响 webpack-dev-server 的运行效果」?...第二步:回顾背景 带着问题我又 review 了一遍 Webpack 官方文档。...第三步:分析问题 按照现有的情报,加上我对 HTTP 协议的理解,可以基本推断问题必然是出在 webpack-dev-server 框架处理首页请求的逻辑上,大概率是 output.publicPath

    1.3K30

    webpack版本问题「建议收藏」

    由于webpack版本较多,而且配置写法,每个版本都大大小小有差异,因版本问题造成的错误很多 1下载指定版本我常用的版本3.3.0, 2不同版本中的坑 2.1在3.0之后版本配置entry和output...插件,在打包时会报错,因为4.0之后安装html-webpack-plugin增加了依赖(为此我将版本还是进行了降级) 2.3注意全局的webpack版本和项目中的webpack版本冲突问题,有时候你会发现自己安装的明明是...3.0版本,却还是用4.0打包的,那是因为你安装了全局的webpack为4.0 解决方案: cnpm uninstall webpack -g 卸载全局的webpack cnpm i webpack...@3.3.0 -g 重新安装指定版本的webpack 2.4在4.0之后的版本mode为必须配置的选项,否则会报错 解决1: webpack --mode development 解决2:package.json...node_module包出错了 1删除node_module文件夹 2cnpm cache clean 3cnpm install 亲测可行 发布者:全栈程序员栈长,转载请注明出处:https

    1.1K30

    webpack版本和vue版本的冲突问题

    最近在做vue的实例项目的时候,遇到用webpack来打包项目的时候,出现了一些版本的兼容性冲突问题,导致运行报错,出现的结果和解决办法如下,在此记录一下: 错误1:TypeErroethis.getOptions...is not a function 原因:安装的less-loader版本太高导致冲突问题产生 解决办法:降低版本号 卸载原本的版本:npm uninstall...以上的版本变动较大,与之前的是有所差距的,所以如果是采用vue3创建的vue项目,用webpack4的版本更能互相的兼容,如果采用webpack5的版本的话,则会出现以上报错 解决办法:...x.x.x (x.x.x 表示需要安装特定的版本号) 补充:由于webpack的版本需要webpack-cli一起配合使用的,所以也要把他安装一下,运行一下 npm install –save-dev...webpack-cli就行 查看安装后的版本号:node_modules/.bin/webpack -v (教训:在安装webpack和less-loader时,切记勿直接安装最新版本

    3.4K20

    使用npm版本锁定的必要性

    前端什么技术都有,react、vue、jquery、regular、seajs… 好在构建工具不复杂,也就是用的gulp + webpack 其实,还算是比较灵活了,虽然没有用nodejs,但是java...发布是走的公司运维开发的发布系统,由于历史原因,发布构建的时候,每修改一次代码需要分两步发版,分别是: 前端发布:webpack+gulp构建,然后发前端静态资源到cdn 后端发布:webpack+gulp...而我们的node_module有的更新了,有的没有更新? 这个还真的很有可能,因为我们的构建机器上的依赖包是优先缓存的,而之前为了做实验我做了清缓存的操作,有可能是有的更新了缓存,有的却没有更新。...因为有了这个猜想,便去验证一番,如果是安装包的问题,那么是不是说只需要做到几次安装的node_module下的依赖包版本一致,就能解决这个问题了呢?...总结与分析 很明显,问题就是出在依赖包,因为使用了范版本,不同的机器安装的包是不一样的,那么构建出来的代码(尤其是压缩、babel等语法解析作用的包处理之后的代码)是非常可能不一样的。

    1.3K10

    Vue打包优化之code spliting

    按需异步加载 这个主要解决首屏请求大小的问题,我们在访问首屏的时候只需要加载首屏所需的逻辑,而不是加载所有路由的代码。...CommonChunkPlugin ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块 ,比如axios ,所以导致打包到了app.js里了,这里我们做下分离 entry:...,我们再看看文件分布,会发现node_module下的模块都收归到了vendor下了。...async 上面的问题答案是肯定的,不可以的,很明显ventor是我们的入口代码即首屏,我们完全没有必要去加载这个codemirror组件,我们先把刚才的路由修改恢复回去。...利用commonChunkPlugin的minChunks属性来分离基础库(node_module)代码和业务代码并针对多次复用的模块进行单独打包; 2.

    2.3K20

    有点难的 webpack 知识点:Dependency Graph 深度解析

    然而事实远不止官网描述的这么简单,Dependency Graph 贯穿 webpack 整个运行周期,从 make 阶段的模块解析,到 seal 阶段的 chunk 生成,以及 tree-shaking...运行过程中如何收集模块间依赖关系,进而构建出 Dependency Graph Dependency Graph 构建完毕后,又是如何被消费的 学习本文,您将进一步了解 webpack 模块解析的处理细节...依赖关系收集过程主要发生在两个节点: addDependency :webpack 从模块内容中解析出引用关系后,创建适当的 Dependency 子类并调用该方法记录到 module 实例 handleModuleCreation...:模块解析完毕后,webpack 遍历父模块的依赖集合,调用该方法创建 Dependency 对应的子模块对象,之后调用 compilation.moduleGraph.setResolvedModule...实例解析 看个简单例子,对于下面的依赖关系: Webpack 启动后,在构建阶段递归调用 compilation.handleModuleCreation 函数,逐步补齐 Dependency Graph

    1.4K10

    Vue打包优化之code spliting

    按需异步加载 这个主要解决首屏请求大小的问题,我们在访问首屏的时候只需要加载首屏所需的逻辑,而不是加载所有路由的代码。...CommonChunkPlugin ventor入口这里我们发现并没有筛选出所有引用的node_module下的模块 ,比如axios ,所以导致打包到了app.js里了,这里我们做下分离 entry:...,我们再看看文件分布,会发现node_module下的模块都收归到了vendor下了。...async 上面的问题答案是肯定的,不可以的,很明显ventor是我们的入口代码即首屏,我们完全没有必要去加载这个codemirror组件,我们先把刚才的路由修改恢复回去。...但是这时又有了新问题,我们的codemirror被同时打包进了两个单页面,并且还有些自己封装的components,例如MTable或是MDataTable等也出现了重复打包。

    4.4K100

    Webpack插件是如何编写的——prerender-spa-plugin源码解析

    概述 本文主要的内容是通过之前使用的prerender-spa-plugin插件的源码阅读,来看下我们应该如何编写一个webpack的插件,同时了解下预渲染插件到底是如何实现的。...在使用这个插件的过程中,我们需要先进行初始化。这个函数可以用来进行一些数据的处理和解析。...一个原型链上的apply方法。 一个钩子函数。 一个绑定生命周期的代码。 有了这些东西,我们的一个Webpack的插件就完成了。...希望通过一个插件源码的示例,能够让大家了解下我们日常使用的看似很复杂的Webpack插件,到底是怎么实现的。...附录 Webpack官方:如何编写一个插件 Webpack Complier钩子 Webpack Compilation对象 Webpack钩子

    80000
    领券