首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

错误:在webpack配置版本5中使用devtool="source-map“选项时出错

错误:在webpack配置版本5中使用devtool="source-map"选项时出错

答案: 在webpack配置版本5中使用devtool="source-map"选项时出错,可能是因为webpack版本5对于devtool选项的配置发生了变化。在webpack 5中,devtool选项的默认值已经改为了"eval",而不再是"source-map"。因此,如果你想使用"source-map"选项,需要手动指定devtool的值为"source-map"。

devtool选项用于配置生成source map的类型,它可以帮助我们在调试代码时定位到源代码中的错误。"source-map"选项生成的source map文件会单独生成,并且会将源代码和编译后的代码完全分离,因此可以提供更好的调试体验。

在webpack配置中使用devtool选项时,可以将其设置为以下几种常用的值:

  • "eval":生成的source map以eval的形式嵌入到打包后的文件中,不会生成单独的source map文件。这是webpack 5中的默认值。
  • "source-map":生成单独的source map文件,提供最完整的源代码映射,但会增加打包时间和文件大小。
  • "cheap-source-map":生成单独的source map文件,但只包含行信息,不包含列信息,可以加快打包速度。
  • "cheap-module-source-map":生成单独的source map文件,同时包含行信息和模块边界,对于大型项目的调试很有用。

根据你的需求,你可以将devtool选项设置为"source-map",然后重新运行webpack进行打包。如果你使用的是webpack 5及以上的版本,确保你的webpack配置文件中的devtool选项设置正确。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各类业务需求。产品介绍链接
  • 腾讯云云数据库MySQL版:提供高性能、可扩展的MySQL数据库服务。产品介绍链接
  • 腾讯云对象存储(COS):提供安全可靠的云端存储服务,适用于图片、音视频、文档等各类文件的存储和管理。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助用户快速构建和管理物联网应用。产品介绍链接
  • 腾讯云区块链(BCS):提供安全、高效的区块链服务,支持快速搭建和管理区块链网络。产品介绍链接
  • 腾讯云音视频处理(MPS):提供音视频处理和分发服务,包括转码、截图、水印等功能。产品介绍链接
  • 腾讯云移动开发(MPS):提供全面的移动开发解决方案,包括移动应用开发、移动推送、移动分析等。产品介绍链接

请注意,以上链接仅为示例,具体的产品选择和推荐应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

3-7 sourceMap的配置

3. source map source map是用来记录转换后代码和源代码之间映射关系的代码,当客户端浏览器收到打包后的js文件,它根据指定的sourcmap文件把打包的的js代码转换成格式规范的...也就是说,浏览器运行转换后的代码出错定位到源代码位置的关键因素在于: 有记录映射关系的source_map,并能告知浏览器如何读取。...我们配置如下属性: devtool: "source-map" 运行打包命令后,如下: ? image.png ?...如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。可用于开发环境和生产环境。...可搭配大部分其他关键字使用。比如: devtool: "cheap-source-map" sourceMap文件默认会保存打包代码和源代码之间的行与列的映射信息,文件内容较复杂,报错会携带列信息。

1.3K30

webpack入门级 - 从0开始搭建单页项目配置

'none' : 'source-map' } 同理,项目的 js 内也可以使用该变量。 设置 source-map选项能设置不同类型的 source-map 。...很明显错误的行数是不对应的,下面设置 devtoolwebpack 在打包后输出 source-map 文件,用于定位错误。...source-map 一般只开发环境用于调试,上线绝对不能带有 source-map 文件,这样会暴露源代码。下面通过环境变量来正确设置 devtool 选项。...下面是我遇到的一些错误以及解决方法(仅供参考并不是万能法则): 一些 loader 和 plugin 使用时,会依赖 webpack版本。...如果使用过程发生错误,检查是否有版本不兼容的问题,可以尝试降一个版本。 重新安装依赖,有可能下载过程中,一些依赖会没装上。 查看使用文档,不同版本所传入的选项属性可能会不一样(被坑过) 。

1.5K10

webpack实战——生产环境配置【中】

经过webpack打包压缩后的代码基本上已经不具备可读性,此时若是代码抛出错误,想要回溯它的调用栈是非常困难的,而有了source map,加上浏览器调试工具(dev tools),要做到这一点就会变得很容易...1.2 配置 webpack.config.js中添加devtool即可完成对source map的配置。...devtool: 'source-map' } 而对于CSS、SCSS及Less来说,则需要添加额外的source map配置项。...1.3 安全 1.1中我们抛出一个安全问题,就是开启source-map的时候任何人都可以通过浏览器的开发者工具devtool来看到工程源码,因此对于安全性来讲是一个极大的隐患。...这样,对于错误来讲,我们仍然可以console控制台中查看源代码的错误栈,或者console日志的准确行数。对于追溯错误来说基本上够使用

1.3K10

vue-cli sourcemap私有化部署配置

排查问题大法之审查webpack配置 vue-cli是开发工具,打包是基于webpack的,那我们就去看webpack咯,看看vue-cli最终生成的webpack配置到底是什么,到底是哪里出错了不就能找到问题的原因了吗...' }) ] } bingo,抛去css相关的sourcemap配置项,我们看到这三个相关配置 devtool : 此选项控制是否生成,以及如何生成sourcemap TerserPlugin...它可以 替代 devtool 选项 注意,SourceMapDevToolPlugin是替代devtool,而在我们的配置里却是并存的,既有devtool也有SourceMapDevToolPlugin...而这就是原因,说明一下,使用SourceMapDevToolPlugin一定要将压缩插件的sourcemap设置为true,否则将不会生成sourcemap,更谈不上对sourcemap的更细粒度的控制了...当然,这里我带大家饶了一段路,其实在上一步,怎么干掉devtool,一定有人想到直接通过 configureWebpack或chainWebpack 修改webpack配置就行了,实际上我知道的最简单的确实如此

5110

(1624) webpack打包后的调试方法

程序开发中,调试程序是最频繁的,那使用webpack后,所有的代码都打包到了一起,这给调试带来了困难,但是webpack设计时就已经考虑好了这点,它支持生产Source Maps来方便我们的调试。...Source Maps详细学习 使用webpack只要通过简单的devtool配置,webapck就会自动给我们生产source maps 文件,map文件是一种对应编译文件和源文件的方法,使调试变得简单...配置devtoolwebpack给我们提供了四种选项。 1.source-map:一个单独文件中产生一个完整且功能完全的.map文件(能定位到具体某行某个位置)。...开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项(生产删除配置webpack.config.js中的入口文件上方配置: module.exports = { devtool...最后,在打包上线,注意需要删除devtool配置

1.4K40

深入浅出 Source Map

在其配置文件 webpack.config.js 中设置devtool[13]即可生成 Source Map 文件: const path = require('path'); module.exports...: "source-map" }; devtool有 20 多种不同取值,分别生成不同类型的Source Map,可以根据需要进行配置。...5.1 关于Source map的版本 2009年 Google 的一篇文章中,介绍 Cloure Compiler , Google 也趁便推出了一款调试东西:Firefox 插件 Closure...上文有说道,只需要在 webpack.config.js 文件中配置 devtool 就可以使用 Source Map ,这个 devtool 具体的值有哪些,可以参考webpack devtool[23...var a = 1; console.log(a, b); //这一行肯定会报错 6.1 source-map devtool: 'source-map' 编译后,可以查看错误代码准确信息和源代码的错误位置

39820

十五:开发模式与webpack-dev-server

借助webpack开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。 0....开发模式下,我们需要对代码进行调试。对应的配置就是:devtool设置为source-map非开发模式下,需要关闭此选项,以减小打包体积。...开发模式下,还需要热重载、路由重定向、挂代理等功能,webpack4已经提供了devServer选项,启动一个本地服务器,让开发者使用这些功能。 2. 如何使用开发模式?...编写 webpack 配置文件 4.1 配置代码 由于配置内容有点多,所以放代码,再放讲解。...效果检测 命令行键入:npm run dev开启服务器后,会自动打开浏览器。如下图所示: 打开控制台,可以看到代码都正常运行没有出错

69930

Webpack4 常用配置详解

入口、出口配置 实现Webpack的打包最基本的就是配置好入口、出口,npm install webpack根目录创建webpack.config.js,代码如下: const path = require...Webpack打包后如果文件出错会把错误指向打包后的文件中的某一行,而我们更需要知道是源文件哪一行出错,这时就需要配置source-map ,moudule.exports加入以下配置项 mode.../ 开发环境的最佳配置 //devtool: 'cheap-module-source-map', 生产环境的source-map的最佳配置 devtool配置项中 cheap表示只具体到某一行不具体到某一列...文件; souce-map指将错误映射到具体源文件上 热加载 当希望更改源文件能自动重新打包文件有两种方法,第一种是package.json里配置scripts scripts: { watch.../polyfill -D ,之后js文件中import "@babel/polyfill"即可,但有时我们开发开源组件不希望polyfill污染全局变量,这是就需要另外一种配置方案,npm install

1.5K30

Webpack 性能系列三:提升编译性能

除此之外,还可以通过一些普适的最佳实践,减少编译范围、编译步骤提升 Webpack 性能,包括: 使用最新版本 Webpack、Node 配置 resolve 控制资源搜索范围 针对 npm 包设置 module.noParse...一、使用最新版本Webpack V3,到 V4,再到最新的 V5 版本,虽然构建功能在不断叠加增强,但性能反而不断优化提升,这得益于 Webpack 开发团队始终重视构建性能,各个大版本之间不厌其烦地重构核心实现... Webpack 5 中,resolve.extensions 默认值为 ['.js', '.json', '.wasm'] ,这意味着 Webpack 针对不带后缀名的引入语句可能需要执行三次判断逻辑才能完成文件搜索...针对 source-map 功能,Webpack 提供了 devtool 选项,可以配置 eval、source-map、cheap-source-map 等值,不考虑其它因素的情况下,最佳实践: 开发环境使用...eval ,确保最佳编译速度 生产环境使用 source-map,获取最高质量 参考:https://webpack.js.org/configuration/devtool/ 八、总结 至此,结合前两篇文章

1.2K20

一文了解source-map

我们如何将报错信息(bundle错误的语句及其所在行列)映射到源码上?为了解决这个问题,google 提出了sourcemap 的想法,并在chorme上最先支持sourcemap的使用。...除source-map外,还可以基于我们的需求设置其他值,webpack——devtool官网一共提供了多种Sourcemap模式:[官网链接](Devtool | webpack 中文文档 (docschina.org...)) 这么多种配置项其实只是五个关键字 eval、source-map、cheap、module 和inline的组合罢了,下面列出它们的意义: 「关键字」 「含义」 特点 source-map 产生....精准度降低换取文件内容的缩小 module 包含 loader 的 sourcemap(比如 jsx to js ,babel 的 sourcemap),否则无法定义源文件 解决对于使用cheap 配置项导致无法定位到...所以为了映射到loader处理前的代码,我们一般也会加上module配置。 总结 开发环境 开发环境中,我们希望速度快,调试更友好。

66520

入门webpack的最佳实践(基于webpack4.X 5.X) - source-map

theme: channing-cyan 导语 来到这家公司之后,一直使用webpack,也写了不少笔记,但是都比较零散,现在决定整理一下webpack相关的知识点,由浅入深,方便自己后续查漏补缺,后续会一直更新...配置 devtool:'source-map' 五种关键配置 有五种关键的配置,然后实际运用中取其组合来构成我们需要的配置 关键字 含义 source-map 产生.map的文件 eval 使用eval...source-map 定位信息最全,可以精确的定位到代码出错的位置,但生成的.map 文件也最大,效率最低。...(cheap), 所以开发环境比较推荐配置devtool: cheap-module-eval-source-map 生产环境 一般情况下,我们并不希望任何人都可以浏览器直接看到我们未编译的源码,...但我们又需要 sourceMap 来定位我们的错误信息, 一方面 webpack 会生成 sourcemap 文件以提供给错误收集工具比如 sentry,另一方面又不会为 bundle 添加引用注释,以避免浏览器使用

38520

优化 Webpack 构建性能的几点建议

以下是一些关于优化 Webpack 构建性能的几点建议: 一、选择合适的 Devtool 版本 webpackdevtool 配置,决定了构建过程中怎样生成 sourceMap 文件。...source-map 的性能较差,但是可以生成原始版本的代码。 大多数 Development 场景下 cheap-module-eval-source-map 是最佳的选择。...下图是各个 Devtool 配置的对比(+号越多,代表速度越快,-号越多,代表速度越慢, o代表中等速度) 注意* : production 配置中,如果需要生成 sourceMap 文件来进行异常分析..., 应该使用 hidden-source-map 或者 nosources-source-map, source-map配置。...正常的 webpack 配置文件中,使用 webpack DllReferencePlugin 解析上一步生成的 manifest.json newwebpack.DllReferencePlugin

63760

webpack】聊聊 Source Map 的使用

以及 Webpack 提供了哪些 Source Map 的使用方式,我们应该在开发环境和生产环境如何使用 Source map 本文使用Webpack 版本是 5.25.1,按照惯例,可以点击查看...一个特殊的场景,你需要在生产环境使用到 source map —— 监控系统分析具体错误信息,这个时候一般选择 source-map—— 整个 source map 作为一个单独的文件生成(当然如果你不需要获取列信息...但需要注意的是要将你的服务器配置为,不允许普通用户访问 source map 文件!你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。...来捕获 js 报错,然后上报到服务器,以用来收集用户使用时候发生的 bug 解析 JS 错误,映射源文件堆栈 通过 sourcemap 查找原始报错信息,可以使用 source-map[5] 监控平台展示...Webpack 提供了很多种 devtool配置,但我们需要掌握 source map、eval、cheap、inline、module 的大致具体含义,这样我们就能够举一反三。

98910

SourceMap知多少:介绍与实践

浏览器中调试,如何判断原始代码的位置? 为了解决这个问题,google 提出了sourceMap 的想法,并在chorme上最先支持sourceMap的使用。...sourceMap 由于包含许多信息,前期也经过多版的编码算法优化,最后2011年探索出了Source Map Revision 3.0 ,这个版本也就是我们现在一直使用的sourceMap版本。...这一版本的mapping信息使用Base64 VLQ 编码,大大缩小了.map文件的体积。...为了方便演示,我们代码加一行错误抛出: ? 可以看到错误信息只有行映射,但实际上开发我们有行映射也基本足够了,所以开发场景下完全可以使用cheap 模式 ,来节省sourceMap的开销 ?...当然如果没有这一类的错误处理工具,可以看看webpack推荐的其他配置: https://www.webpackjs.com/configuration/devtool/ 03 CSS sourceMap

1.1K20

webpackdevtool配置简单对比简书_钢铁雄心4toolpack

官方手册传送门 官方对devtool配置的定义很简单:选择一种 source map 格式来增强调试过程,不同的值会明显影响到构建build和重新构建rebuild的速度。...什么是 source map 现在的前端代码会通过babel编译或者各类的压缩,debug,只能调试编译或者压缩后的代码。...这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你语句级别上调试执行,也会妨碍你每行的一些列上设置断点。...3.3 生产环境 这些选项通常用于生产环境中: (none)(省略 devtool 选项) – 不生成 source map。这是一个不错的选择。...如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

73910

Webpack 模块化原理和SourceMap

使浏览器可以重构原始源并在调试器中显示重建的原始源; 更容易定位到源文件错误 如何使用SourceMap 第一步:根据源文件,生成source-map文件,webpack在打包,可以通过配置生成source-map...; devtool:'source-map' 第二步:转换后的代码,最后添加一个注释,它指向sourcemap; //# sourceMappingURL=common.bundle.js.map 浏览器会根据我们的注释...version:当前使用版本,也就是最新的第三版; sources:从哪些文件转换过来的source-map和打包的代码(最初始的文件); names:转换前的变量和属性名称(因为目前使用的是development...webpack为我们提供了非常多的选项(目前是26个),来处理source-map; 参考文档:https://webpack.docschina.org/configuration/devtool/...) 因为开发中,我们只需要行信息通常就可以定位到错误了 cheap-module-source-map: 会生成source-map,类似于cheap-source-map,但是对源自loader的source-map

50530
领券