因为eval-source-map 里面包含了 eval,所以整个模块的代码仍旧被 eval 函数所包裹,因为多出了 source-map,所以代码指定所属文件的方式发生了变化,通过 sourceMappingURL 指定了原文件,但是原代码文件内容以 dataURL 的方式内嵌进了打包文件里。 这里我们对代码进行一点调整,故意使用一个未声明的变量。 // module-1...
1. source map 关键字 1. eval:使⽤eval包裹模块代码; 2. source map:产⽣.map⽂件; 3.cheap:不包含列信息; 4. inline:将.map作为DataURI嵌⼊,不单独⽣成.map⽂件; 5. module:包含loader的source map; 2. source map 类型 source map的类型是可以根据关键字进行一个排列组合得到不同的类型。
可选参数: [inline-|hidden-|eval-] [nosources-] [cheap-[module-]]source-map 例如: source-map 外部生成,在外部生成独立的同名.map 文件。 可以提示: 错误代码准确信息和源代码的错误位置。 错误位置信息可以精确到某行某列。 inline-source-map 内联生成,既映射的内容在生成的 js 文件内部,不独立生成.ma...
前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。 我们先分别来看下这几种基础配置: eval eval 的 api 是动态执行JS 代码的。比如: 但有个问题,eval 的代码打不了断点。 怎么解决这个问题呢? 浏览器支持了这样一种特性,只要在 eval 代码的最后加上 //# ...
source-map 在浏览器运行编译后的代码时,可以对应到编译前也就是开发编写的代码。对调试非常有帮助。 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。 类型 看似配置项很多, 其实只是五个关键字eval、source-map、cheap、module和inline的任意组合 ...
记录原始代码与经过工程化处理代码之间位置映射关系 Map 文件 页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据//# sourceMappingURL内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开...
//@ sourceMappingURL=/path/to/source.js.map 1. 运行时就会关联到源码: sourcemap 介绍完了,接下来一起来看下 webpack 的几种 sourcemap 配置。 前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。
A. source-map :【生成一个独立的source-map文件】,并且在bundle文件中有一个注释,指向source-map文件; //# sourceMappingURL=bundle.js.map B. eval-source-map: 会生成sourcemap,但是source-map是以DataUrl添加到eval函数的后面 C. inline-source-map: 会 生成sourcemap,但是source-map是以DataUrl添加到bundle...
采用此选项后:你应该将你的服务器配置为,不允许普通用户访问 source map 文件! 5. Source Map 的最佳实践 ① 开发环境下: ⚫ 建议把 devtool 的值设置为 eval-source-map ⚫ 好处:可以精准定位到具体的错误行 ② 生产环境下: ⚫ 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map ...
webpack 通过devtool控制需要生成的 source map 类型 我们来看一下devtool的支持的属性devtool, 可以看到 source map 同时也分为很多种,但大体上都是加载形式的区别, 本质的核心还是相同的。 把它们罗列出来居然有这么多 eval eval-cheap-source-map