devtool: ‘cheap-module-eval-source-map‘报错

最新推荐文章于 2025-02-03 18:48:35 发布
最新推荐文章于 2025-02-03 18:48:35 发布
阅读量2k 收藏 2
点赞数 2
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47135993/article/details/120026976
版权

webpack

        今天在学习TS的过程中发现了一个问题，之前的一套简单的配置，在原来使用的时候都是ok的，但是在我升级webpack版本之后打包报错了，报错如下：

         这段报错大概的意思就是说：devtool应该的匹配模式是以inline-或hidden-或eval-起始，webpack5中对于devtool更加严格，需要严格遵循模式中的关键字顺序。

        这就很好修改啦：

将devtool: 'cheap-module-eval-source-map'修改为devtool: 'eval-cheap-module-source-map'即可

 

webpack——devtool配置及sourceMap的选择
zwkkkk1的博客
03-23 6886
官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。 不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。 1. 什么是 source map 现在的前端代码会通过babel编译或者各类的...
webpack5使用cheap-module-eval-source-map报错
reg183的专栏
07-08 835
今天在构建demo时，运行报错， Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. 惯性思维先查找了下百度，似乎没找到合适的解答。 于是，耐心看了下报错提示，大致是说webpack5的版本规范更严格了，我的某段代码写的不规范。 报错我贴一下 根据提示，改成eval-cheap-module-source-map
webpack开发环境性能优化之优化代码调试-source-map
最新发布
2501_90433086的博客
02-03 852
但是，有些情况下，点击后面的跳转是不一样的，因为这些非语法错误，而是执行错误的部分，在非source-map的情况下跳转到的是一个eval的执行内容，而使用了source-map虽然提示一样但是跳转的确实是源代码的样子。cheap-module-source-map：生成在外部，和source-map类似但是错误提示到整行而不是整句，不会收到babel的影响。即eval-source-map或eval-cheap-module-source-map，前者更友好，后者更快。
深入浅出的webpack构建工具---devTool中SourceMap模式详解(四)
weixin_34401479的博客
08-12 1052
阅读目录 一：什么是SourceMap? 二：理解webpack中的SourceMap的eval,inline,sourceMap,cheap,module 三：开发环境和线上环境如何选择sourceMap? 回到顶部 一：什么是SourceMap?    我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于...
webpack4.0核心概念（七）———— “devtool:source-map“
qq_37899792的博客
09-23 1642
1.为了开发时，快速的定位问题 2.线上代码，我们有时候也会开启 前端错误监控，快速的定位问题 可以建立源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。 在dev模式中，默认开启，关闭的话 可以在配置⽂件⾥ webpack.config.js devtool:"none" devtool的介绍：https://webpack.js.org/configuration/devtool#devtool eval:速度最快,使⽤eval包裹模块代码, sour.
webpack4中的devtool配置
YMX2020的博客
08-26 2458
webpack4中的devtool配置 为什么有时候需要配置devtool devtool配置选项是用来控制是否生成source map，以及如何生成source map 什么是source map 它是一个储存源代码和打包代码映射关系信息的文件，专门用于调试和debug source map作用 因为sourceMap是一个映射关系，所以可以把打包后出错的代码位置和源代码对应的代码位置对应，这样我们可以很快定位错误 webpack4关于devtool的默认配置 mode:developmen
webpack:开发环境下调试代码-source-map
Celester_best的博客
12-20 2385
现在我们将代码故意写错一个地方，运行webpack命令，看浏览器报错情况 不设置source-map 可以看到报错的地方并没有为我们提供具体的位置。 设置不同的source-map sourse-map：一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误。 设置source-map只需要在webpack.config.js中设置devtool即可 设置devtool:'source-map' 设置devtool:'source-map'，执行webpa
Webpack的devtool的source maps
JUSTIN的博客
05-28 727
（一）前言 我们在处理webpack打包优化时候，除开使用happypack和webpack-parallel-uglify-plugin加速babel编译构建，使用dll动态链接库，指纹缓存，页面切片，gzip压缩等优化，其实还可以设置devtool中的source maps进一步处理构建速度和生产包压缩大小。 （二）devtool devtool官方解释 源映射由一大堆信息组成，可用于将压缩...
【webpack5修行之道】第8篇：性能优化-sourcemap
j178202798的博客
06-17 587
上一篇我们讲到： 什么是sourcemap？ sourcemap是源代码和编译后的代码之间映射关系的一个对象文件，我们开发环境和生成环境运行的代码其实都是编译后的代码，编译后的代码信息和源码是不一样的，如果出现代码错误，我们需要通过映射关系将错误信息准确的提示出来，能够便于调试 怎么配置sourcemap呢 修改webpack.config.js文件 配置devtool: 'source-map' const { CleanWebpackPlugin } = require('clea...
浅谈webpack devtool里的7种SourceMap模式
10-17
cheap-module-source-map模式结合了cheap和module的特点，它不仅不包含列信息，而且对loader生成的SourceMap进行了简化处理，只保留了对应的行信息。它的.map文件更小，适合开发环境使用。 每种模式在打包编译后的...
webpack 配置 devtool
Leon的博客
06-19 3798
在开发环境中我们使用：cheap-module-eval-source-map module.exports = { devtool: 'cheap-module-eval-source-map', entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/public"...
vue项目，导致sourcemap失效的一个问题
qq_36647210的博客
04-30 4083
在开发组件的时候，发现sourcemap失效了，在chrome的devtool里，不管是debugger跳转，还是点击抛出错误后面的文件路径跳转都直接跳到一个不相关的文件。 经过反复试验，发现是因为不同组件目录下的vue文件名字都是index.vue,配置的sourmap将不同目录的index.vue文件混淆了，导致所有目录下的index.vue文件的sourmap都映射到同一个index.vue文件上了。 ...
webpack——devtool里的7种SourceMap模式
05-19 779
我们先来看看文档对这 7 种模式的解释： 模式 解释 eval 每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释//@ sourceURL. source-map 生成一个SourceMap文件. hidden-source-map 和 source-map 一样，但不会在 bundle 末尾追加注释. inline-source-map 生成一个DataUrl形式的 SourceMap 文件. eval-source-map...
source-map 使用
想成为大神的小白
09-18 612
1. vue.config.js 中增加配置 module.export = { chainWebpack(config) { config.when( process.env.NODE_ENV === 'development', // production config => config.devtool('#cheap-module-eval-s...
wbpack中的source-map
07-16
在Webpack中，source map是一种文件，它将转换后的代码映射回原始源代码，以便于调试。它提供了一种在浏览器中查看和调试实际源代码的方式，而不是查看和调试转换后的代码。 通过在Webpack配置中设置`devtool`选项，可以启用source map。具体来说，`devtool`选项有多种可选值，每个值都代表不同的source map类型。以下是一些常见的`devtool`选项值： - `eval`: 使用eval包裹模块代码，并且使用data URL形式的source map。 - `cheap-eval-source-map`: 类似于`eval`，但是每行都有一个source map映射。 - `cheap-module-eval-source-map`: 类似于`cheap-eval-source-map`，但是会将loader的source map也包括进来。 - `eval-source-map`: 使用eval包裹模块代码，并且生成独立的source map文件。 - `cheap-source-map`: 类似于`eval-source-map`，但是不包含列信息，只能定位到行。 - `cheap-module-source-map`: 类似于`cheap-source-map`，但是会将loader的source map也包括进来。 - `source-map`: 生成独立的source map文件，完整包含所有信息。 要根据项目需求选择合适的`devtool`选项。通常在开发环境中使用更详细的source map类型（如`eval-source-map`），而在生产环境中使用更简单的source map类型（如`cheap-source-map`）以获得更好的性能。 配置示例： ```javascript module.exports = { // ... devtool: 'eval-source-map', // ... }; ``` 这样配置后，在开发环境中，Webpack会生成一个独立的source map文件，帮助你进行调试和定位问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值