设置为 `true`:在构建时生成 Source Map。 设置为 `'inline'`:将 Source Map 直接嵌入到生成的文件中。 Source Map 文件使用 在转换后的文件中通过添加注释的方式引入source map文件。例如: // jquery.min.js // ...转换后的代码 //# sourceMappingURL=jquery.min.map 最后一行注释的作用,是告知浏览器的...
打包出来的main.bundle.js,可以看到最后一行是//# sourceMappingURL=main.bundle.js.map,就是告诉浏览器源码所在的位置 是main.bundle.js.map 代码语言:javascript 代码运行次数:0 运行 AI代码解释 /***/(()=>{// webpackBootstrapvar__webpack_exports__={};console.log('Interesting!!!')// Create hea...
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...
eval:浏览器 devtool 支持通过 sourceUrl 来把 eval 的内容单独生成文件,还可以进一步通过 sourceMappingUrl 来映射回源码,webpack 利用这个特性来简化了 sourcemap 的处理,可以直接从模块开始映射,不用从 bundle 级别。 cheap:只映射到源代码的某一行,不精确到列,可以提升 sourcemap 生成速度 source-map:生成 sourc...
//@ sourceMappingURL=/path/to/source.js.map 1. 运行时就会关联到源码: sourcemap 介绍完了,接下来一起来看下 webpack 的几种 sourcemap 配置。 前面说过,webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。
eval模式是 Webpack 默认的 Source Map 模式。它会将每个模块的代码封装在一个eval函数中执行,并在代码末尾添加//# sourceMappingURL注释,指向一个虚拟的 Source Map。 // webpack.config.jsmodule.exports={devtool:'eval',mode:'development',entry:'./app.js',output:{filename:'bundle.js',},}; ...
//# sourceMappingURL=main.bundle.js.map 然后同级目录下main.bundle.js.map,是比较详细的 Source Map 信息 { "version":3, "sources": [ "webpack://webpack5-template/./src/index.js" ], "names": [], "mappings":";;;AAAA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA,mB", "file...
页面初始运行时只会加载编译构建产物,直到特定事件发生 —— 例如在 Chrome 打开 Devtool 面板时,才会根据 //# sourceMappingURL 内容自动加载 Map 文件,并按 Sourcemap 协议约定的映射规则将代码重构还原回原始形态,这既能保证终端用户的性能体验,又能帮助开发者快速还原现场,提升线上问题的定位与调试效率。
// @ sourceMappingURL=map文件路径 就可以关联上 source map文件了 devtool webpack 通过devtool控制需要生成的 source map 类型 我们来看一下devtool的支持的属性devtool, 可以看到 source map 同时也分为很多种,但大体上都是加载形式的区别, 本质的核心还是相同的。
你会发现生成的代码也是用 eval 包裹的,但除了 sourceUrl 外,还有 sourceMappingUrl: 再运行的时候除了 eval 的代码会生成文件放在 sources 外,还会做 sourcemap 的映射: webpack 的 sourcemap 的配置就利用了浏览器对 eval 代码的调试支持。 所以为什么这个配置项不叫 sourcemap 而叫 devtool 呢?