Webpack：SourceMap 的配置

最新推荐文章于 2024-08-08 17:26:17 发布
最新推荐文章于 2024-08-08 17:26:17 发布
阅读量6.8k 收藏 13
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41900808/article/details/88681090
版权

概念（大白话）

解决源代码和目标生成代码的映射关系

1.现在知道dist目录下main.js文件第96行出错

2.souceMap 它是一个映射关系，它知道dist目录下main.js文件96行，实际上对应的是src目录下index.js文件中的第一行

3.当前其它是index.js中第一行代码出错了

 关闭SouceMap

开启SourceMap

开启SourceMap后，dist文件夹下会多出.js.map文件，这个文件里面是映射的对应关系

添加inline前缀

映射文件会被直接写进main.js当中，base64形式的字符串，在main.js的底部

添加cheap前缀

  • 告诉我那一行出错就好，不用告诉我那一列出错，节约性能，提高打包速度 
  • 只映射业务代码，而不映射第三方包、库

添加module前缀

映射第三方包、库

eval打包方式

  • 效率最快，性能最好的方式
  • 不在main.js文件最后生成映射
  • 针对比较复杂代码，eval提示出来的错误可能并不全面

开发模式下的最佳devtool配置

cheap-module-eval-source-map

这种情况下提示出来的错误是比较全的，同时打包速度也是比较快的

上线模式下的devtool最佳配置

cheap-module-source-map

oiaa
关注
专栏目录
webpack之SourceMap
Luckyzhoufangbing的博客
06-07 888
（一）什么是sourceMap sourceMap其实是一个映射关系，比如打包后的js文件（如dist目录下main.js第78行报错了），sourceMap能够找到（dist目录下main.js第78行）对应的打包前的源文件（是哪个文件夹下的哪一行） （二）用法 在 webpack.config.js 中 module.exports 里面加一行 devtool: 'source-map' devtool有很多source-map形式，详情见webpack手册devtool部分 配置好.
webpack:开发环境下调试代码-source-map
Celester_best的博客
12-20 2245
现在我们将代码故意写错一个地方，运行webpack命令，看浏览器报错情况 不设置source-map 可以看到报错的地方并没有为我们提供具体的位置。 设置不同的source-map sourse-map：一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误。 设置source-map只需要在webpack.config.js中设置devtool即可 设置devtool:'source-map' 设置devtool:'source-map'，执行webpa
Webpack的Source Map
weixin_46274192的博客
10-16 348
1.生成环境遇到的问题 前端项目在投入生产环境之前，都需要对JavaScript源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。 其中，会不可避免的一些问题： 对压缩混淆之后的代码除错（debug） 变量被替换成没有任何语义的名称 空行和注释被剔除 2.什么是Source Map Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着代码压缩混淆前后的对应关系。 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够
webpack sourcemap
最新发布
m0_73280507的博客
08-08 698
@FilePath: \undefinedc:\Users\zhangjiaxuan\Desktop\新建 文本文档.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
webpack中的sourcemap
金溪的博客
10-22 437
sourcemap和Data URL 1、sourcemap 我们在打包中，将开发环境中源代码经过压缩、去空格、babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。 sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁，主要是方便开发人员的错误定位。 2、Da...
webpack之source map
weixin_45047039的博客
11-29 2917
webpack之source map前言一、什么是source map二、在webpack中启用source map三、关于source map的各种模式 前言 通过构建编译之类的操作，我们可以将开发阶段的源代码，转换为能够在生产环境中运行的代码，这是一种进步，但这种进步的同时也意味着我们在实际生产环境中运行的代码与我们在开发环境编写的代码之间会有很大的差异，这种情况下如果我们需要去调试应用，又或是我们在运行应用时出现了意料之外的错误，我们将无法定位错误信息。因为无论是调试还是调试还是报错都是基于转换过后的
Laravel-Webpack:Webpack配置和资源文件
03-12
开发者可以通过mix进行简单的配置，如编译Sass、处理图片、启用SourceMap等，而无需直接修改webpack.config.js。 在资源文件管理方面，Laravel-Webpack鼓励开发者遵循模块化原则，将JavaScript、CSS等资源按功能...
chain webpack的source map配置
06-13
要配置 Chain Webpack 的 Source Map，可以使用 `devtool` 属性。`devtool` 属性可以设置为不同的字符串，每个字符串对应不同的 Source Map 类型。以下是一些常见的 Source Map 类型及其对应的 `devtool` 值： - `...
dva-webpack:两个webpack
05-10
在 `webpack.config.dev.js` 中，我们通常会设置 `devtool` 选项为 `cheap-module-eval-source-map`，这可以提供快速的源代码映射，但不包含列信息。还会使用 `webpack-dev-server` 提供热重载功能，提高开发效率。...
webpack打包之sourcemap
我的博客简介
08-01 6705
希望看到每个loader，每个plugin消耗的打包时间，可以借助一个插件：speed-measure-webpack-plugin，该插件有webpack版本兼容问题。source-map 比 eval信息更加的全，不仅仅展示出错误的源文件，而且把源文件的目录都给展示出来，这样方便用户查看项目结构。默认情况下，打包完成展示，打包的总时间，并没有告诉我，每个插件使用所消耗的时间。影响 npm run build 打包时间：node版本，电脑性能。有部分插件不支持，可能不支持，需要给注释一下。........
webpack-sources:Webpack的源代码处理类-Source code
03-25
webpack源 包含多个表示Source类。 可以要求Source提供源代码，大小，源映射和哈希。 Source 所有源的基类。 公开方法 所有方法都应视为昂贵，因为它们可能需要进行计算。 source Source . prototype . source ( ) - > String | Buffer 以字符串或缓冲区（表示二进制源）的形式返回表示的源代码。 buffer Source . prototype . buffer ( ) - > Buffer 返回表示的源代码为Buffer。 字符串将转换为utf-8。 size Source . prototype . size ( ) - > Number 返回所表示源代码的大小（以字节为单位）。 map Source . prototype . map ( options ?: Object ) - > Objec
Webpack source-map 详解
Web_boom的博客
01-28 1179
2.3 source-map文件分)* inline-source-map：会生成sourcemap，但是source-map是以DataUrl添加到bundle文件的后面!
webpack中使用source map
果车的博客
05-16 525
基本介绍： 当webpack打包源代码时，可能会很难找到错误和警告在源代码中的位置。而source map的功能就是将编译后的代码映射回原始源代码，可以明确的找到错误或警告的代码位置。 代码演示： const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个 var webpack = require('webpack'); const {resolve} = require('path'); const TerserPlugin =
Webpack中SourceMap简介以及提升前端项目编译效率实践
Run_youngman的博客
06-22 339
说在前面 近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。 SourceMap SourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery
Webpack——调试工具Source Map
世界和我们都不该止步于此
04-22 701
Source Map是一个信息文件，里面存储这位置信息 并不是我们生活中的卫星定位信息，是指定代码的位置信息，可以清晰的获取到指定代码所处在的行数 为什么需要Source Map呢？难道我们打开终端看不到吗？ 带着这些问题我们去学习Source Map Source Map文件中存储着压缩混淆的代码所对应的转换前的位置，那么我们就不难理解为什么需要使用Source Map了，根本原因是因为安全性-我们不会把源代码直接展现在客户端面前，而是将压缩混淆之后的代码作为运行的基本，但于此同时我们的程序如果出
webpack-source-map 优化
zhangyubababa的博客
02-23 90
webpack---优化_source-map
weixin_43390711的博客
05-31 187
webpack---优化_source-map
webpack--插件
xuan的博客
07-07 746
1、插件没有像 loader 那样的独立运行环境（loader-runner）2、只能在 webpack 里面运行 三、插件使用 四、开发一个最简单的插件 1、src/demo-plugin.js 2、加入到 webpack 配置中 五、插件中如何获取传递的参数 通过插件的构造函数进行获取 六、插件的错误处理 （1）参数校验阶段可以直接 throw 的方式抛出 （2）通过 compilation 对象的 warnings 和 errors 接收 七、插件扩展：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值