webpack5使用cheap-module-eval-source-map报错

最新推荐文章于 2024-06-15 22:44:12 发布
最新推荐文章于 2024-06-15 22:44:12 发布
阅读量797 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chendongpu/article/details/118566649
版权

webpack5 配置错误 源码映射 eval-cheap-module-source-map 修复
关键词由CSDN通过智能技术生成

今天在构建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,运行成功
在这里插入图片描述

reg183
关注
专栏目录
浅谈webpack-dev-server的配置和使用
08-27
config.devtool = 'cheap-module-eval-source-map' // 代码映射 config.devServer = { port: 8000, // 启动服务监听端口 host: '0.0.0.0', // 可以通过localhost访问 overlay: { // 在页面上显示错误信息 ...
webpack基础优化
weixin_51642358的博客
07-17 633
这里面简单介绍了webpack 项目优化的几个小方面，是学习过程中的记录。
devtool: ‘cheap-module-eval-source-map‘报错
大香蕉的博客
08-31 1879
今天在学习TS的过程中发现了一个问题，之前的一套简单的配置，在原来使用的时候都是ok的，但是在我升级webpack版本之后打包报错了，报错如下： 这段报错大概的意思就是说：devtool应该的匹配模式是以inline-或hidden-或eval-起始，webpack5中对于devtool更加严格，需要严格遵循模式中的关键字顺序。 这就很好修改啦： 将devtool:'cheap-module-eval-source-map'修改为devtool:...
webpack开发环境性能优化之优化代码调试-source-map
最新发布
2401_85123750的博客
06-15 673
hidden-source-map：会生成外部的built.js.map，但是在浏览器的source中会隐藏webpack://，不隐藏构建后代码eval-source-map：也是内联的source-map，但是都会追加在built.js的每个模块引入的eval中nosources-source-map：生成在外部，但是在浏览器的source中会隐藏我们的js源代码（有路径），构建后的js代码也看不见。
Webpack学习笔记（三）
qq_41022872的博客
11-23 374
SourceMap 在之前的几章里面，我们介绍了webpack的打包编译功能。能通过loader、plugin机制帮助我们构建代码。虽然构建代码很大程度上便利了我们的生产环境，但是我们实际的代码和我们开发的代码会有很大的差异，当出现错误的时候，我们很难直接定位到源代码中对应的位置。 而Souce Map（源代码地图）就是一个映射转化后的代码与源代码之间的关系。我们可以看到很多第三方的库的dist文件中都会包含.map文件 我们点开来看一下 在浏览器中打开开发者工具后，会自动请求.map文件，然后根据这个
记录webpack的source map使用详细说明
qq_35385241的博客
03-14 1990
common.js export const show = () => { debugger document.write('hello webpack 11') } 没有使用source-map，看一下调试效果： eval devtool: 'eval' 调试效果： eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source
devtool里的7种SourceMap模式
阳光男孩的专栏
06-07 2321
我们在使用 webpack 打包我们的工程模块时，经常会需要 devtool 开启 sourceMap 让我们可以调试代码，但是 webpack 文档中关于 devtool 给出了7种模式。本文将这7种模式的区别作详细介绍，希望能对你使用有帮助。 ...
webpack-devtool-eval-issue
05-08
为了解决这些问题，开发者通常会选择其他的 `devtool` 配置，例如 `cheap-module-eval-source-map` 或 `eval-source-map`。这些选项提供了类似的功能，但安全性更高，对性能的影响也相对较小。 `cheap-module-eval-...
webpack-source-maps
05-06
3. **cheap-module-source-map**：与 cheap-module-eval-source-map 类似，但不使用 `eval()`，因此更安全，但同样不包含列映射。 4. **source-map**：生成完整的 source map，包括列映射，适用于生产环境，但会增加...
roadhogWebpack4:webpack4构建antd-pro
05-13
6. **Source Map**：在开发环境中，使用`cheap-module-eval-source-map`，在生产环境中使用`source-map`，既保证了调试友好，又兼顾了性能。 转换Ant Design Pro项目至Webpack 4的过程中，需要更新配置文件（通常是...
浅谈webpack devtool里的7种SourceMap模式
10-17
cheap-module-source-map模式结合了cheap和module的特点，它不仅不包含列信息，而且对loader生成的SourceMap进行了简化处理，只保留了对应的行信息。它的.map文件更小，适合开发环境使用。 每种模式在打包编译后的...
【webpack5】高级优化
m0_68324632的博客
01-17 1453
本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 1. 提升开发体验 2. 提升打包构建速度 3. 减少代码体积 4. 优化代码运行性能
Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
热门推荐
liwusen的博客
03-01 5万+
简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap 一 、 从Sourcemap和Data URL说起 （1）什么是Sourcemap? 我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境...
webpack——devtool配置及sourceMap的选择
m0_67393039的博客
04-27 828
官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。 不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。 1. 什么是 source map 现在的前端代码会通过babel编译或者各类的压缩，在debug时，只能调试编译或者压缩后的代码。简单来说，source map 提供了一种将压缩文件中的代码映.
vuejs如何调试代码
weixin_30645617的博客
08-12 1239
基于webpack的配置调试 使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法： npm install -g @vue/cli # 全局安装vue-cli,版本vue3.x vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。 cd my-p...
webpack开发环境优化 HMR、source-map
~
03-31 953
1.HMR：模块热替换【从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。】 作用：一个模块发生变化，只会重新打包这一个模块，而不会打包所有模块。 hot: true 2.source-map:一种提供源代码到构建后代码的映射技术（方便调试） devtool: 'source-map' [inlune-| hidden-| eval-][nosources-][cheap- [module-]]source-map 内联：没有生成文件，构建速度更快 外部
57/04 webstorm 中调试 vue 项目
970655147的专栏
05-24 1959
前言 妈的, 我还以为是直接 打个断点, 然后 页面上触发一下 就能够调试了, 哪知道 还踩了一些坑 参照了如下 的两篇文章 Vue项目调试总结-WebStorm+Chrome调试 webstrom 调试 Vue.js 单页面程序 当然 本来参照 第一篇 文章应该能够调试成功的, 但是 由于少看了一个 修改 devtool: 'source-map', 走了不少弯路 后面 又...
webpack 配置 devtool
Leon的博客
06-19 3723
在开发环境中我们使用：cheap-module-eval-source-map module.exports = { devtool: 'cheap-module-eval-source-map', entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/public"...
Vue+Webpack项目调试：从Sourcemap到vue-cli详解
项目中通常包含`webpack.dev.conf.js`（用于开发环境）和`webpack.prod.conf.js`（用于生产环境）两个配置文件，分别对应不同的编译设置，其中开发环境默认启用`cheap-module-eval-source-map`以支持源代码映射。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值