webpack的sourcemap各种参数详解

最新推荐文章于 2024-09-23 09:57:08 发布
最新推荐文章于 2024-09-23 09:57:08 发布
阅读量582 收藏 1
点赞数
文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doomliu/article/details/124771036
版权
本文详细介绍了webpack中devtool配置项对sourcemap的影响，包括eval、source-map、cheap、module和inline等关键字的含义，以及它们在不同环境下的应用。推荐的本地开发和测试环境配置为"eval-cheap-module-source-map"，以实现快速定位问题和提高构建速度。线上环境中则建议避免使用sourcemap，以保护业务逻辑。同时，提出线上debug可通过上传sourcemap到错误监控系统来定位源代码问题。
摘要由CSDN通过智能技术生成

webpack配置中的devtool字段可以允许我们控制sourcemap的生成，提供开发时候的代码定位功能

关于sourcemap可以参考 sourcemap详解

1. sourcemap关键字

sourcemap关键字如下

  • eval
    使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩）
    eval包裹每个代码块时候，会在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用来定位到原文件。
    eval模式优势在于，它是将每个模块单独eval执行，因此如果配合source-map使用，就可以单独缓存每个模块的sourcemap，这样就可以在重新构建时候实现增量修改sourcemap，节省时间。如果不使用eval模式，就是一个文件（chunk）对应一个sourcemap，重新构建时候需要将整个chunk的sourcemap重新生成，更耗费时间。
    因此eval模式的优势就在于重新构建的速度更快
  • source-map
    产生source map
  • cheap
    用来修饰source-map
    让sourcemap只保存行信息，不保存列信息
    让sourcemap只将打包后的代码映射到转换过的代码，不映射到原始源代码
    【由于源代码到转译后的代码的映射关系由相应的loader提供，因此cheap模式应该不需要关心这部分的sourcemap】
  • module
    用来修饰cheap-source-map
    让sourcemap可以映射到原始源代码
    【由于源代码到转译后的代码的映射关系由相应的loader提供，因此module模式应该会处理这部分sourcemap，以最终得到到原始源代码的映射】
  • inline
    用来修饰source-map
    将.map作为DataURI嵌入，不单独生成.map文件

2. 常见sourcemap组合

devtool构建速度重新构建速度生产环境品质
(none)++++++yes打包后的代码
eval++++++no生成后的代码
cheap-eval-source-map+++no转换过的代码（仅限行）
cheap-module-eval-source-mapo++no原始源代码（仅限行）
eval-source-map–+no原始源代码
cheap-source-map+ono转换过的代码（仅限行）
cheap-module-source-mapo-no原始源代码（仅限行）
inline-cheap-source-map+ono转换过的代码（仅限行）
inline-cheap-module-source-mapo-no原始源代码（仅限行）
source-map––yes原始源代码
inline-source-map––no原始源代码
hidden-source-map––yes原始源代码
nosources-source-map––yes无源代码内容

\

品质说明

\

  • 原始源代码
    你写的代码，未经过任何处理
  • 转换过的代码
    经过各种loader转译后的代码
  • 生成后的代码
    转译后并经过webpack处理，注入webpack运行时代码后的代码
  • 打包后的代码
    合成一个chunk后的、压缩过的代码

3. 最佳实践

  • 本地开发环境使用"eval-cheap-module-source-map"
    这个配置提供到源代码的的完整映射，方便定位问题，并且不需要通常不必要的行映射，提高了构建速度，并且由于使用了eval，重构建速度更高
  • 测试环境使用"eval-cheap-module-source-map"
    原因和本地开发环境一样，如果介意内联sourcemap导致文件过大，可以配置"cheap-module-source-map"
  • 线上尽量不使用sourcemap，防止业务逻辑暴露。

线上debug

  1. 将sourcemap上传到线上错误监控系统中，这样代码报错就可以定位到源码的相应位置
  2. 将sourcemap上传到公司内网

 

刷题刷到手抽筋
关注
Webpack 的源码映射（sourcemap）配置原理解析
ZuqCloud的博客
09-27 201
源码映射是一项重要的开发工具，它可以将打包后的代码映射回原始源代码，从而方便我们在调试和排查问题时进行定位。cheap-module-source-map：与 cheap-source-map 类型类似，但同时会将 loader 的 source map 加入到生成的 source map 中。bundle.js 文件是打包后的代码，bundle.js.map 文件是源码映射文件。这种映射类型相对较慢，但生成的映射文件包含详细的源码映射信息，非常有利于调试和排查问题。
WebPack工作原理
mn_hey的博客
07-12 1218
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。这段话有三个重点：打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始
webpack 总结
肖的博客
09-12 304
文件结构 |-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那些事
Triumph_light的博客
08-25 679
由于我们使用webpack去打包文件会生成bundle.js文件，都是混淆在一起，代码可能是一个或者多个文件组成，当报错的时候无法去定位到错误信息。因此source-map记录了映射关系，可以帮助我们快速去定位问题。在webpack官网中有很多的配置，但也是基于以下五个去组合而成。source map：保存源代码映射关系的文件。服务器根据错误和source-map去分析定位。利用Express搭建服务器。
【Webpack】Source Map详解
最新发布
lph159的博客
09-23 1278
在现代的前端开发中，源代码经过编译、打包和压缩后会变得难以阅读，尤其是当你使用如 Babel 之类的工具将 ES6+ 的语法转换成 ES5 时，或是使用 TypeScript 编译为 JavaScript 代码。此时，如果项目在生产环境中出现问题，调试变得极为困难。为了解决这个问题，Source Map作为一种映射机制应运而生。它将编译、压缩后的代码与源代码对应起来，使开发者在调试工具中能够看到原始的代码结构。这极大地提高了调试的效率和开发体验。Source Map。
Webpack中的sourcemap以及如何在生产和开发环境中合理的设置sourcemap的类型
热门推荐
liwusen的博客
03-01 5万+
简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap 一 、 从Sourcemap和Data URL说起 （1）什么是Sourcemap? 我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境...
Webpack SourceMap 参数含义
kaiyuanheshang的博客
04-12 125
名词说明 名称 含义 eval 使用 eval 包裹模块代码 source map 产生 .map 文件 cheap 不包含列信息 inline 将 .map 作为 DataURI 嵌入，不单独生成 .map 文件 module 包含 loader 的 source map 列表 devtool 首次构建 二次构建 是否适合生产环境 可以定位的代码 (none) +++ +++ yes 最终输出的代码 eval +++ +++ no webpack 生
webpack-sourceMap配置
东东爱编码博客
12-23 1781
文章目录一、webpack-sourceMap配置 一、webpack-sourceMap配置 SourceMap 是什么，下面通过例子来演示。 修改 webpack.config.js，加上一行配置项 devtool: 'none' ： const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpac
Webpack执行命令参数详解
08-30
4. `-d`: 使用此参数，Webpack会生成source map文件，这有助于在浏览器中调试打包后的代码，查看原始源文件的位置。 5. `--progress`: 显示编译进度，方便开发者了解Webpack当前的处理状态。 6. `--color`: 启用...
webpack将js打包后的map文件详解
11-26
类似于这样的map文件 由webpack自动生成 参数： ...sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
webpack sourcemap
m0_73280507的博客
08-08 764
@FilePath: \undefinedc:\Users\zhangjiaxuan\Desktop\新建 文本文档.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
Webpack：SourceMap 的配置
oiaa的博客
03-20 6876
概念（大白话） 解决源代码和目标生成代码的映射关系 1.现在知道dist目录下main.js文件第96行出错 2.souceMap它是一个映射关系，它知道dist目录下main.js文件96行，实际上对应的是src目录下index.js文件中的第一行 3.当前其它是index.js中第一行代码出错了 关闭SouceMap 开启SourceMap 开启SourceMap...
如何配置 Webpack SourceMap 的最佳实践？
我乐了的博客
02-13 2078
Source Map（源代码地图）就是解决此类问题最好的办法，从它的名字就能够看出它的作用：映射转换后的代码与源代码之间的关系。一段转换后的代码，通过转换过程中生成的 Source Map 文件就可以逆向解析得到对应的源代码。目前很多第三方库在发布的文件中都会同时提供一个 .map 后缀的 Source Map 文件。例如 jQuery。我们可以打开它的 Source Map 文件看一下，如下图所示：这是一个 JSON 格式的文件，为了更容易阅读，我提前对该文件进行了格式化。
Webpack中SourceMap简介以及提升前端项目编译效率实践
Run_youngman的博客
06-22 350
说在前面 近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。 SourceMap SourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery
webpack5使用cheap-module-eval-source-map报错
reg183的专栏
07-08 813
今天在构建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
SourceMap 启用时 devtool各个值的含义
zhxh0376的专栏
03-29 356
SourceMap 启用时 devtool各个值的含义 开发环境 以下选项非常适合开发环境： eval eval - 每个模块都使用 eval() 执行， 并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。 eval - source - map eval - source - map - 每个模块使用 eval() 执行， 并且 source map
Webpack之旅(二): webpack基本打包配置(Source-Map)
qq_44746132的博客
12-20 1040
我们接着昨天的webpack 的内容继续： 今天我们将说一下entry,output的配置以及mode配置，最后我将为大家说到的一个概念Source Map 我们先将昨天我们写的一个webpack的一个基本的配置放到这里: const path = require('path') // 该文件需要导出webpack的配置对象 module.exports = { entry: path.jo...
记录webpack的source map使用详细说明
qq_35385241的博客
03-14 2017
common.js export const show = () => { debugger document.write('hello webpack 11') } 没有使用source-map，看一下调试效果： eval devtool: 'eval' 调试效果： eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source
webpack开发环境性能优化之优化代码调试-source-map，2024年最新近期有面试的必看
2401_83974173的博客
04-10 602
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
webpack配置参数
04-28
7. devtool：指示 webpack 生成 source map 的方式，方便调试代码。 8. devServer：配置 webpack-dev-server 的参数，可以在开发过程中提供实时重载等功能。 这些参数可以在 webpack 配置文件中进行设置，以便满足...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值