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

最新推荐文章于 2024-01-17 12:44:38 发布
最新推荐文章于 2024-01-17 12:44:38 发布
阅读量3.1k 收藏
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lorraineliang/article/details/109645982
版权

今天在构建typeScript的学习demo时，运行报错，惯性思维先查找了下百度，似乎没找到合适的解答。

于是，耐心看了下报错提示，大致是说webpack5的版本规范更严格了，我的某段代码写的不规范。

报错我贴一下

根据提示，改成eval-cheap-module-source-map,运行成功

lorraineliang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
devtool: ‘cheap-module-eval-source-map‘报错
大香蕉的博客
08-31 1847
今天在学习TS的过程中发现了一个问题，之前的一套简单的配置，在原来使用的时候都是ok的，但是在我升级webpack版本之后打包报错了，报错如下： 这段报错大概的意思就是说：devtool应该的匹配模式是以inline-或hidden-或eval-起始，webpack5中对于devtool更加严格，需要严格遵循模式中的关键字顺序。 这就很好修改啦： 将devtool:'cheap-module-eval-source-map'修改为devtool:...
webpack开发环境性能优化之优化代码调试-source-map
最新发布
2401_85123750的博客
06-15 649
hidden-source-map：会生成外部的built.js.map，但是在浏览器的source中会隐藏webpack://，不隐藏构建后代码eval-source-map：也是内联的source-map，但是都会追加在built.js的每个模块引入的eval中nosources-source-map：生成在外部，但是在浏览器的source中会隐藏我们的js源代码（有路径），构建后的js代码也看不见。
source-map
前端精髓
04-10 1346
eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。 eval-source-map - 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射
source-map 使用
想成为大神的小白
09-18 565
1. vue.config.js 中增加配置 module.export = { chainWebpack(config) { config.when( process.env.NODE_ENV === 'development', // production config => config.devtool('#cheap-module-eval-s...
Webpack5相关知识点（二）- 优化 （1）- SourceMap、提升打包构建速度
JHY97的博客
06-09 1140
Webpack5相关知识点（二）- 优化 （1）- SourceMap、提升打包构建速度
浅谈webpack-dev-server的配置和使用
08-27
config.devtool = 'cheap-module-eval-source-map' // 代码映射 config.devServer = { port: 8000, // 启动服务监听端口 host: '0.0.0.0', // 可以通过localhost访问 overlay: { // 在页面上显示错误信息 ...
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的过程中，需要更新配置文件（通常是...
vue-cli 关闭热更新操作
10-14
3. 考虑使用 `cheap-module-source-map` 或 `eval-source-map` 作为开发环境的 source map 类型，它们更快但精度稍低。 通过上述方法，你可以有效地优化热更新的性能，同时在必要时关闭热更新，以适应不同的开发...
webpack5 基础配置 (5)深入认识source-map,初始babel
lin_fightin的博客
03-27 2605
在第四章的时候初步认识了一下source-map，知道他是来帮我们映射源代码文件的，接着继续深入学习 devtool可以设置非常多的值，通常用它来设置source-map。 我们主要了解几个关键的。 1false 设置为false，则表示不生成source-map 2 none 在开发模式下，设置为none会报错。none只能在生产模式生成，效果跟false差不多，他的意思是省略devtool。其实mode设位production时，devtool默认值已经是none。mode为development时，
devtool里的7种SourceMap模式
阳光男孩的专栏
06-07 2264
我们在使用 webpack 打包我们的工程模块时，经常会需要 devtool 开启 sourceMap 让我们可以调试代码，但是 webpack 文档中关于 devtool 给出了7种模式。本文将这7种模式的区别作详细介绍，希望能对你使用有帮助。 ...
webpack——devtool配置及sourceMap的选择
m0_67393039的博客
04-27 806
官方手册传送门 官方对devtool配置的定义很简单：选择一种 source map 格式来增强调试过程，不同的值会明显影响到构建build和重新构建rebuild的速度。 不过，什么是source map，官方用提供了许多种的source map，其中的区别是什么，我们在开发中应该怎么选择，都是我们要学习的。 1. 什么是 source map 现在的前端代码会通过babel编译或者各类的压缩，在debug时，只能调试编译或者压缩后的代码。简单来说，source map 提供了一种将压缩文件中的代码映.
webpack基础优化
weixin_51642358的博客
07-17 584
这里面简单介绍了webpack 项目优化的几个小方面，是学习过程中的记录。
【webpack5】高级优化
m0_68324632的博客
01-17 1428
本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 1. 提升开发体验 2. 提升打包构建速度 3. 减少代码体积 4. 优化代码运行性能
vuejs如何调试代码
weixin_30645617的博客
08-12 1232
基于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...
57/04 webstorm 中调试 vue 项目
970655147的专栏
05-24 1944
前言 妈的, 我还以为是直接 打个断点, 然后 页面上触发一下 就能够调试了, 哪知道 还踩了一些坑 参照了如下 的两篇文章 Vue项目调试总结-WebStorm+Chrome调试 webstrom 调试 Vue.js 单页面程序 当然 本来参照 第一篇 文章应该能够调试成功的, 但是 由于少看了一个 修改 devtool: 'source-map', 走了不少弯路 后面 又...
webpack 配置 devtool
Leon的博客
06-19 3699
在开发环境中我们使用：cheap-module-eval-source-map module.exports = { devtool: 'cheap-module-eval-source-map', entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/public"...
wbpack中的source-map
07-16
通常在开发环境中使用更详细的source map类型（如`eval-source-map`），而在生产环境中使用更简单的source map类型（如`cheap-source-map`）以获得更好的性能。 配置示例： ```javascript module.exports = { // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值