source-map:信息最完整,但安全性最低,外部用户可轻易获取到压缩、混淆之前的源码,慎重使用 hidden-source-map:信息较完整,安全性较低,外部用户获取到.map文件地址时依然可以拿到源码 nosources-source-map:源码信息确实,但安全性较高,需要配合 Sentry 等工具实现完整的 Sourcemap 映射 2.2 使用插件 上面介绍的...
在Webpack 中,可以通过配置 `devtool` 属性来启用 Source Map。常见的配置包括: module.exports ={//其他配置...devtool: 'source-map',//或 'inline-source-map', 'cheap-module-source-map' 等}; 参数说明如下: `source-map`: 提供完整的 Source Map,适合生产环境。 `inline-source-map`: 将 Source...
},devtool:'source-map'}; 核心配置 // 开启 source-map 调试功能// 生产环境推荐: source-map 模式module.exports= {devtool:'source-map'};// ===or===// 开发环境推荐:eval-source-map 模式module.exports= {devtool:'eval-source-map'}; 五、示例项目 用于调试的项目 ## 工程目录如下. ├──...
因为eval-source-map 里面包含了 eval,所以整个模块的代码仍旧被 eval 函数所包裹,因为多出了 source-map,所以代码指定所属文件的方式发生了变化,通过 sourceMappingURL 指定了原文件,但是原代码文件内容以 dataURL 的方式内嵌进了打包文件里。 这里我们对代码进行一点调整,故意使用一个未声明的变量。 // module-1...
source-map source-map 的配置是生成独立的 sourcemap 文件: 可以关联,也可以不关联,比如加上 hidden,就是生成 sourcemap 但是不关联: 生产环境就不需要关联 sourcemap,但是可能要生成 sourcemap 文件,把它上传到错误管理平台之类的,用来映射线上代码报错位置到对应的源码。
source-map 的配置是生成独立的 sourcemap 文件: 可以关联,也可以不关联,比如加上 hidden,就是生成 sourcemap 但是不关联: 生产环境就不需要关联 sourcemap,但是可能要生成 sourcemap 文件,把它上传到错误管理平台之类的,用来映射线上代码报错位置到对应的源码。
1、Source Map source map 翻译过来就是源代码地图,它是用来映射我们转换后的代码与源代码之间的关系,转换后的代码我们通过转换过程中生成的 source-map 文件就可以逆向得到源代码 一般打包生成后的 bundle.js 中会通过一段注释来引用 source-map 文件
devtool:'source-map', // ... 我们在webpack.config.js里增加了一个名字是devtool的配置项,并取值是字符串'source-map'。 现在我们退出之前的命令行程序,重新执行npx webpack-dev-server,然后刷新浏览器,观察页面。 我们发现代码在断点处暂停了,但这次与上次不同,这次是在原始的a.js里的断点出暂停的。
//@ sourceMappingURL=/path/to/source.js.map 1. 运行时就会关联到源码: sourcemap 介绍完了,接下来一起来看下 webpack 的几种 sourcemap 配置。 前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。
3.1 默认 Source Map 的问题 开发环境下默认生成的 Source Map,记录的是 生成后的代码的位置 。会导致 运行时报错的行数 与 源代码的行数 不一致的问题。示意图如下: 3.2 解决默认 Source Map 的问题 开发环境下,推荐在 webpack.config.js 中添加如下的配置,即可保证 运行时报错的行数 与 源代码的行数 保...