webpack打包工具中的映射（source-map）

最新推荐文章于 2024-05-07 03:30:40 发布
最新推荐文章于 2024-05-07 03:30:40 发布
阅读量552 收藏
点赞数 1
分类专栏： webpack source-map 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kgjfk/article/details/114027617
版权

什么是source-map?
source-map就是管理源代码和打包后的文件之间的映射关系的一个配置，如果没有开启source-map映射，当我们将打包后的文件在浏览器上运行时，如果报错了，那我们就只能找到打包后的文件的报错位置，而无法知道源代码的报错位置。配置source-map是在webpack.config.js文件中的module.exports中配置devtool:“cheap-module-eval-source-map”,当然也不是只有这一个值，根据不同的模式（mode），可以配置不同的值，根据具体情况而定。如果要关闭source-map，则配置该devtool的值为：hidden-source-map/nosources-source-map.

瑶&希
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的source-map
WFL804203164的博客
03-04 204
source-map是什么？ source-map是webpack提供最好的几个功能之一，是为了提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码的错误） 如何使用 module.exports = { entry: '', output: {}, module:{}, plugins: [], mode: 'development', devServer: {}, // 使用 source-map devtool: 'ev
webpack配置source-map
RookieLink
02-28 1000
webpack配置source-map进行源码映射
如何在webpack项目中添加文件夹映射绝对路径
角角兔的博客
09-30 1549
要求（针对的情况） 在webpack项目中有很多的引入是需要加一个特定的前缀的那么怎么映射文件位置呢 例如我需要把 import { xxx } from "src/components/bar/slideBar.vue' 改成更为简单的 import { xxx } from "@bar/slideBar.vue' 需要怎么做呢？ 解决办法 webpack配置文件中加入 module.exp...
Webpack设置代码映射，可调试打包后的代码
XunLin233的博客
09-22 222
在调试台中找到 src文件夹下的index.js文件，即为代码源码。这时候我们就调试不了我们的代码。
webpack开发环境性能优化之优化代码调试-source-map
最新发布
cwcnl25131的博客
05-07 679
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
26种source-map看花了眼？别急，理解这几个全弄懂
hello ice cream
05-04 3373
上一篇 webpack处理模块化源码 的文章中提到了 “source map”，这一篇来详细说说。 有什么作用 source map 用于映射编译后的代码与源码，这样如果编译后的代码出错了，可以很快速的定位到源文件的位置。 我们在 format.js 文件中打印一个不存在的 hello 变量， 当没有 source map 的时候，没有办法看到报错内容在源码的哪个位置。 生产环境提示报错是在编译后的 bundle.js 文件，点击该文件后，只能看到压缩和丑化之后的代码。 [外链图片转存失败,源站可能有防盗链
你知道源码映射吗？
qq_43778239的博客
05-15 889
文章目录webpack源码映射请注意，项目上线请务必关闭源码映射，避免源码泄露请注意，项目上线请务必关闭源码映射，避免源码泄露请注意，项目上线请务必关闭源码映射，避免源码泄露以下文章给新手和懒得看原理的人看的 webpack源码映射 什么是源码映射？ 相信你在一个使用webpack打包的项目中经常会在控制台输出一些东西吧？ 例如这样的一个报错 源码中报错部分代码 function Hello(props){//这里的prop.sex是故意写错的 return <p>名字：{ props.
《十》Webpack 中的 source-map
花铛
09-13 444
source-map经过 Webpack 打包后的代码运行在浏览器上时，和开发者编写的代码其实是有差异的：例如 ES6 的代码可能被转换成 ES5 的代码；例如代码对应的行号、列号在经过编译后不一致；例如代码进行压缩丑化后会修改编码名称；例如 TypeScript 编写的代码被转换成 JavaScript。当代码报错需要调试时，调试这种转换后不一致的代码是很困难的。source-map。
source-map-loader:从模块中提取 sourceMappingURL 注释并将其提供给 webpack
08-04
入门首先，您需要安装source-map-loader ： npm i -D source-map-loader 然后将插件添加到您的webpack配置中。 例如： 文件.js import css from "file.css" ; webpack.config.js module . exports = { module : { ...
source-map-support:npm 包 source-map-support 的包装器
07-16
`source-map-support`库通常与像`webpack`、`rollup`或`browserify`这样的打包工具一起使用，这些工具在构建过程中会生成源映射。通过安装并启用`source-map-support`，即使在生产环境中，开发者也能获得类似开发...
stack-source-map：添加对错误堆栈的源映射支持（仅Chrome）
02-04
尝试使错误堆栈与浏览器中的源映射一起使用，但仅支持Chrome。 该代码主要来自 ，但简化为仅与浏览器一起使用，并已固定为支持所有源映射模式 基本上，这是v8 一种hack 适用于babel和webpack :grinning_face_with...
source-map-loader, 从模块中提取sourceMappingURL注释并将它的提供给 web service.zip
09-18
source-map-loader, 从模块中提取sourceMappingURL注释并将它的提供给 web service 加载器从现有源文件( 从他们的sourceMappingURL ) 中提取源映射。安装npm i -D source-map-loader用法文档：使用加载程序工具 web ...
webpack将js打包后的map文件详解
11-26
类似于这样的map文件 由webpack自动生成 参数： ...sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
【解决】vue-element-admin找不到source-map代码
Lione10的博客
02-23 1379
【解决】vue-element-admin找不到source-map代码
webpack打包之sourcemap
我的博客简介
08-01 6059
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
devtool里的7种SourceMap模式
阳光男孩的专栏
06-07 2254
我们在使用 webpack 打包我们的工程模块时，经常会需要 devtool 开启 sourceMap 让我们可以调试代码，但是 webpack 文档中关于 devtool 给出了7种模式。本文将这7种模式的区别作详细介绍，希望能对你使用有帮助。 ...
弄懂 SourceMap，前端开发提效 100%
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-09 2047
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群一、什么是 Source Map通俗的来说， Source Map 就是一个信息文件，里面存储了代码打包转换后的位置...
vue知识点七-webpack
weixin_43725034的博客
11-04 169
网站 https://webpack.docschina.org 文档 https://webpack.docschina.org/concepts/ 简介：本质上，webpack 是一个前端资源构建工具，用于现代 JavaScript 应用程序的静态模块打包工具。 当webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)， 此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 全局下载包 cnp...
webpack:开发环境下调试代码-source-map
Celester_best的博客
12-20 2131
现在我们将代码故意写错一个地方，运行webpack命令，看浏览器报错情况 不设置source-map 可以看到报错的地方并没有为我们提供具体的位置。 设置不同的source-map sourse-map：一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误。 设置source-map只需要在webpack.config.js中设置devtool即可 设置devtool:'source-map' 设置devtool:'source-map'，执行webpa
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文件，帮助你进行调试和定位问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值