webpack之SourceMap踩坑

最新推荐文章于 2024-08-13 17:41:15 发布
最新推荐文章于 2024-08-13 17:41:15 发布
阅读量1k 收藏
点赞数
分类专栏： webpack 文章标签： vue node.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_28660961/article/details/107384752
版权

webpack,打包后的bundle.js为了节省空间，会将一些js文件进行压缩，这样就对我们调试过程中产生了影响，现在运用Sourcemap进行代码定位，能够方便我们进行调试，修改代码，
**但是！只有当mode：development 时，才能压缩，可能是方便开发，而production时候更注重效率吧，大家注意一下^^
在这里插入图片描述

这里devtool用的是不生成map文件的方式，其他的方式可参考https://segmentfault.com/a/1190000016404266?utm_source=tag-newest

see you next time~

渣工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 source map踩坑
weixin_48462578的博客
03-25 778
使用 source map踩坑 source map作用：告诉打包后你那行代码出错，控制台点击红色报错跳到错误行 主要在webpack.config.js配置中加上下面配置 devtool:‘eval-cheap-module-source-map’, 我滴奶奶没效果， 最终发现：需要把配置的new webpack.HotModuleReplacementPlugin()注释掉 全部代码 const path = require('path') //绝对路径,__dirname代表当前的项目路径下 cons
Vue项目升级到Webpack 4.x初步踩坑总结
热门推荐
harsima的博客
06-26 2万+
Vue项目升级到Webpack 4.x初步踩坑总结，包括压缩JS/CSS，分离CSS/提取CSS到单独文件，分离Chunk，以及vue-loader 15.x版本的使用和基于vue项目的修改
webpack4.x不生成sourcemap文件
qq_34456362的博客
05-28 3407
八成是看了某个webpack4的入门博客，那个里面用了个ugligyjs-webpack-plugin的插件，主要原因就在这里 在plugins使用ugligy的时候配置中需要开启sourcemap 然后这样情况下虽然和源码产生了关联，但是开启babel后单步执行状态还是会出现问题 其实使用webpack4的时候，当mode为production状态下会默认压缩代码，然后开发环境我觉...
vue-cli 中 配置 productionSourceMap 为 false 失效？
最新发布
weixin_45485922的博客
08-13 256
最近 发现 vuecli 构建的 项目中配置的 productionSourceMap 为 false 后 ，生产代码 还是能够看到 sourceMap 文件。生效前提条件 得设置 NODE_ENV 为 production 才会生效！
vue项目，导致sourcemap失效的一个问题
qq_36647210的博客
04-30 3894
在开发组件的时候，发现sourcemap失效了，在chrome的devtool里，不管是debugger跳转，还是点击抛出错误后面的文件路径跳转都直接跳到一个不相关的文件。 经过反复试验，发现是因为不同组件目录下的vue文件名字都是index.vue,配置的sourmap将不同目录的index.vue文件混淆了，导致所有目录下的index.vue文件的sourmap都映射到同一个index.vue文件上了。 ...
webpack source map定位异常
weixin_44702125的博客
04-17 1870
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。 为了更容易...
productionSourceMap失效
weixin_42216094的博客
12-27 3721
写在 src/config/index.js 或者 vue.config.js 下： module.exports = { productionSourceMap: false, publicPath:"auto", ... ... chainWebpack(config) { // config.devtool('source-map') 这样写会不生效 // 正确写法以下方形式为准，判断一下环境 config.devtool(process.e
webpack打包ts的配置及踩坑
最初的梦想
08-04 1575
webpack打包ts的配置及踩坑
npm 编译慢_Webpack 4编译速度优化踩坑
weixin_39844426的博客
12-22 741
一，目标今天打算做一些webpack打包编译的速度优化。二，准备工作当前webpack版本 4.43.0首先，既然是做速度优化，就得先知道当前的编译速度是多少。推荐这个插件：speed-measure-webpack-pluginGitHub地址：https://github.com/stephencookdev/speed-measure-webpack-plugin​github.comnpm...
【踩坑记】如何解决前端调试无法显示正确的soureceMap映射，并且无法在控制台断点调试的问题
Wonder233的学习博客
07-01 1308
前端无法在调试控制台断点调试且无法显示正确的源文件。
Chrome 谷歌浏览器升级到120版本后VUE项目F12无法正常输出日志和调试Debugger ，无法使用Sourcemap的解决办法
liuhengjun_it的博客
12-15 3540
F12无法正常 console.log 输出日志，统一在vue.js 下输出定位不到源代码，在代码中写debugger也无法进入断点。2、设置-忽略列表-启用忽略清单（升级120版本后，默认启用的）3、关闭启用忽略清单，再次尝试就可以了。1、F12开发者工具点击右上角设置。
Webpack source-map 详解
Web_boom的博客
01-28 1176
2.3 source-map文件分)* inline-source-map：会生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面!
NUXT规范及常见问题
weixin_45022563的博客
04-23 598
一些nuxt规范及常见问题
【Webpack】关于sourcemap那些事
Triumph_light的博客
08-25 627
由于我们使用webpack去打包文件会生成bundle.js文件，都是混淆在一起，代码可能是一个或者多个文件组成，当报错的时候无法去定位到错误信息。因此source-map记录了映射关系，可以帮助我们快速去定位问题。在webpack官网中有很多的配置，但也是基于以下五个去组合而成。source map：保存源代码映射关系的文件。服务器根据错误和source-map去分析定位。利用Express搭建服务器。
webpack 总结
肖的博客
09-12 292
文件结构 |-dist |-index.html |-...... |-src |-index.js |-print.js |-kid.jpg |-style.css |-package.json |-webpack.config.js webpack.config.js const path = require('path') module.exports = { // ...
webpack环境 -- 开启调试 sourceMap
彩虹
07-31 6281
Source Map 调试: 插件: devtool webpack.SourceMapDevToolPlugin webpack.EvalSourceMapDevToolPlugin 开发环境配置值development: eval eval-source-map cheap-eval-source-map cheap-module-eva...
webpack source map详解
林涧的专栏
07-12 4858
1. 什么是source map ?     根据名字可以推测出source map就是我们编译后的源文件映射。当使用webpack 编译前端项目时，配置项devtool控制是否生成source map。 2. 分类     source map 文件可分为2类，内联型和外联（独立）型：     内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesConten...
webpack 之开发环境优化 source-map
p1967914901的博客
01-29 380
webpack 之开发环境优化 source-map /** * source-map：一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误） * [inline-|hidden- |eval-][nosources-][cheap-[module-]]source-map source-map：外部 错误代码准确信息 和 源代码的错误位置 inline-source-map：内联 只生
webpack的sourceMap
05-13
webpack的sourceMap是一种映射文件，它可以将打包后的代码映射回原始的源代码，方便我们进行调试和定位问题。在webpack的配置中，我们可以通过设置devtool选项来开启sourceMap。 常用的devtool选项包括： - source...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值