一文了解source-map 背景 作为一个开发工程师——无论是什么开发，要求开发环境最不可少的一点功能就是——debug功能。当我们通过webpack 将我们的源码打包成了 bundle.js 。...module.exports = { // 开启 source map // 生产环境一般不开启 sourcemap devtool: 'source-map', }...)) 这么多种配置项其实只是五个关键字 eval、source-map、cheap、module 和inline的组合罢了，下面列出它们的意义： 「关键字」 「含义」 特点 source-map 产生....module.exports = { // 开启 source map // 生产环境一般不开启 sourcemap devtool: 'source-map', }...eval module.exports = { // 开启 source map // 生产环境一般不开启 sourcemap devtool: 'source-map',
---- 介绍 webpack的source-map原理 ---- 为什么要有source-map 答：因为目前我们开发时候的源码跟通过webpack构建混淆压缩后的生产环境部署的代码不一样，sourceMap...---- source-map，怎么来的 ？它在哪儿？...答:通过webpack等工具，我们可以使用 sourceMap，它跟构建后的文件同在一个目录下～ ---- source-map，它怎么用？...⚠️：在webpack配置中设置devtool: 'none'，那么就会关闭source-map ---- development模式会自动开启source-map,是为了让我们方便调试，定位错误，但是...当然，还是有很多手段可以提高反编译成本的 ---- 下面是source-map各种不同配置的速度 当我在production模式下，加入 devtool:"source-map"选项，打包构建后，代码里多了很多个
配置 devtool:'source-map' 五种关键配置 有五种关键的配置，然后实际运用中取其组合来构成我们需要的配置 关键字 含义 source-map 产生.map的文件 eval 使用eval...loader的sourcemap module 包含loader的sourcemap(比如jsx)，否则无法定义源文件 inline 将.map作为DataURL嵌入，不单独生成.map文件 常见配置项 source-map
目前的source-map长什么样子？...选择不同的值，生成的source-map会稍微有差异，打包的过程也会有性能的差异，可以根据不同的情况进行 选择; 下面几个值不会生成source-map false:不使用source-map，也就是没有任何和...source-map相关的内容。...，方便我们调试代码; 使用source-map的值 source-map 注释： //# sourceMappingURL=bundle.js.map 生成独立的source-map文件，并在打包后的...JS文件中有一个注释指向source-map文件； eval-source-map source-map以DataUrl的形式添加到eval函数后面 inline-source-map source-map
而通常 generator 不会自己去做映射关系的 VLQ 编码（source map 的位置信息存储方式），而是交由专业的库来处理，比如 Mozilla 出品的 source-map。...source-map source-map 库封装了底层的映射关系计算的逻辑，在生成 source map 时向开发者提供了两种类型的 API，一种是低级 API，其单纯地通过向结果中插入源代码和编译后代码的行列对应关系来生成...在 generate 步骤，source-map 提供了 SourceNode 用于在保留原有节点信息的同时添加该节点对应源代码的行列信息。...，这其中会维护生成代码的行列信息，而在 node 中则保存有源代码的位置信息，如此便可调用 source-map 的低级 API 去生成 source-map。...最后，回到 source-map 库的实现上来。
第一步： 首先确保 Chrome浏览器已正确安装，并在 vscode 中添加 vscode-chrome-debug 插件； 第二步： 修改 webpack 相关配置，输出 source-map...vue.config.js 中增加如下配置： module.exports = { chainWebpack: (config) => { if (isDev) { config.devtool('source-map...') } } } 注意，也可以通过 configureWebpack: { devtool: 'source-map' }进行配置，方式多种，不赘述。
第二步： 修改 webpack 相关配置，输出 source-map。...vue.config.js 中增加如下配置： module.exports = { chainWebpack: (config) => { if (isDev) { config.devtool('source-map...') } } } 注意，也可以通过 configureWebpack: { devtool: 'source-map' }进行配置，方式多种，不赘述。
226a77c9d46b33da5b78b1c76a10384c78132074/lib/WebpackOptionsApply.js#L188 if (options.devtool) { if (options.devtool.includes("source-map...namespace: options.output.devtoolNamespace }).apply(compiler); } } 从上述代码可看出，会首先判断devtool的值是否包含source-map...由此针对devtool的不同配置项，可做这样的拆分处理： 任何不包含source-map或者eval： 浏览器中不会有任何代码映射关系可寻，只能定位到打包后代码的位置。...不包含source-map且包含eval: 会将打包后每个模块的代码使用 eval() 执行，且在模块最后注释有sourceURL=xxx/xx/xx/xx.js.map类似路径，用于定位，能够定位到源码文件路径...具体逻辑可以看这里：传送门 包含source-map: 包含source-map决定了将以更为细粒度的方式来展示代码映射的详情。
configureWebpack: { devtool: "source-map"; } 如果你是 低版本 脚手架构建的项目，需要先自行设置 source-map 的开启。...devtool: "source-map"; 配置调试 选择新建一个 launch.json 的文件，选择 Chrome 环境。 ?
module.rules.exclude 或 module.rules.include 降低 Loader 工作量 配置 watchOption.ignored 减少监听文件数量 优化 ts 类型检查逻辑 慎重选择 source-map...七、慎用 source-map source-map 是一种将经过编译、压缩、混淆的代码代码映射回源码的技术，它能够帮助开发者迅速定位到更有意义、更结构化的源码中，方便调试。...不过，同样的 source-map 操作本身也有很大性能开销，建议读者根据实际场景慎重选择最合适的 source-map 方案。...针对 source-map 功能，Webpack 提供了 devtool 选项，可以配置 eval、source-map、cheap-source-map 等值，不考虑其它因素的情况下，最佳实践： 开发环境使用...eval ，确保最佳编译速度 生产环境使用 source-map，获取最高质量 参考：https://webpack.js.org/configuration/devtool/ 八、总结 至此，结合前两篇文章
devtool: 'source-map' } 而对于CSS、SCSS及Less来说，则需要添加额外的source map配置项。...devtool: 'source-map', module: { rules: [ // scss {...而在生产环境中，通常我们会对代码进行压缩，而最常见的压缩插件UglifyjsWebpackPlugin目前只支持source-map形式。...1.3 安全 在1.1中我们抛出一个安全问题，就是在开启source-map的时候任何人都可以通过浏览器的开发者工具devtool来看到工程源码，因此对于安全性来讲是一个极大的隐患。...开发环境中我们关注打包速度，而在生产环境中我们关心的则是线上错误处理、输出资源的体积以及资源渲染等问题，而比较好的利用source-map和资源压缩都可以帮助我们处理处理或优化生产环境中的一些问题，因此比较重要
我们配置如下属性： devtool: "source-map" 运行打包命令后，如下： ? image.png ?...仅用于开发环境 优点：能够准确映射到原始源代码，相较source-map，可以少加载一个文件 缺点：由于携带了最完整的映射信息，所以构建和重构速度很慢。...相较source-map，打包后的index.js文件变大了。 3.2 hidden 关键字 隐藏源文件。仅有一种搭配： devtool: "hidden-source-map" 打包后如下： ?...image.png 总结：与 source-map 相同，但不会为 bundle 添加引用注释。...source-map 生成映射信息文件 inline 将映射信息内联 eval 将模块用eval包裹执行。含有这个关键字就不能用于生产环境。
Webpack中配置source map是devtool字段，有很多不同配置，比如常用的source-map、eval-source-map、cheap-module-source-map等。...去官网看，那么多配置其实就是几个关键字的各种组合： source-map、cheap、eval、module、hidden、nosource、inline。...这几个关键字，我只是大概试了试，有点混乱，就不截图了，大概简单说一下： source-map：产生.map文件 eval：产生的代码用eval包裹，会在末尾追加注释 //@ sourceURL，通过sourceUrl...我是觉得，常用的source-map、cheap、eval知道一下就好，如果真的线上环境需要的话，建议就是配置cheap-module-source-map，定位到行，然后体积也会小一些，够用，开发的话配置
1.1 示例 以 Webpack 为例，设置 devtool = 'source-map' 即可同时打包出代码产物 xxx.js 文件与同名 xxx.js.map 文件，Map 文件通常为 JSON 格式...1.2.1 mappings 编码规则 举个例子，对于下面的代码： 编译后 当 devtool = 'source-map' 时，Webpack 生成的 mappings 字段为： ;;;;;AAAA,...、eval、source-map、nosources、hidden、cheap、module 七种关键词组合而成，这些关键词各自代表一项 Sourcemap 规则。...2.1.2 source-map 当 devtool 包含 source-map 时，Webpack 才会生成 Sourcemap 内容。...例如，对于 devtool = 'source-map'，产物会额外生成 .map 文件，形如： { "version": 3, "sources": [ "webpack
source-map$ 这个就是配置的规律，是几种基础配置的组合。 搞懂了每一种基础配置，比如 eval、nosources、cheap、module，按照规律组合起来，也就搞懂了整体的配置。...前面说过，webpack 的 sourcemap 配置是 eval、cheap、nosources、inline、source-map 等基础配置的组合。...再来看下一个基础配置： source-map source-map 的配置是生成独立的 sourcemap 文件： 可以关联，也可以不关联，比如加上 hidden，就是生成 sourcemap 但是不关联...比如 devtool 配置为 source-map，生成的 sourcemap 是这样的： 当你加上 nosources 之后，生成的 sourcemap 就没有 sourceContent 部分了：...source-map$ 的规律来进行组合，就可以实现各种需求下的 sourcemap 配置。
'none' : 'source-map' } 同理，在项目的 js 内也可以使用该变量。 设置 source-map 该选项能设置不同类型的 source-map 。...很明显错误的行数是不对应的，下面设置 devtool 让 webpack 在打包后输出 source-map 文件，用于定位错误。...module.exports = { devtool: 'source-map' } 再次触发错误，source-map 文件起作用准确定位到代码错误的行数。 ?...source-map 一般只在开发环境用于调试，上线时绝对不能带有 source-map 文件，这样会暴露源代码。下面通过环境变量来正确设置 devtool 选项。...'source-map' : 'none', entry: { main: '.
/dist/js/bundle.js'}, // 配置代码调试工具 devtool: 'source-map', // 声明模块的打包规则 module: {...} } 9.在命令行中执行全局webpack命令，调用webpack.config.js对指定的文件及其依赖的资源进行打包 10.source-map 代码调试工具 程序打包后要调试代码，就需要用到source-map...工具，在项目目录文件下输入：webpack --devtool source-map，在控制台的Sources里面就会多出一个webpack文件夹，在一个'点'文件夹里就会生成没有打包之前的文件，在文件需要调试的位置执行...debugger，再次执行webpack --devtool source-map，就可以在控制台中没有打包之前的文件里看到相应的运行效果，最后，务必在webpack.config.js文件里面写入配置信息
「而在 node_modules/rollup 中的文件，皆是我们构建之后的文件，且没有 source-map，因此造成调试的困难。」...「那我们将 rollup 源码下载到本地目录，并手动构建，生成 source-map，并将 node_modules/rollup 进行替换，岂不是可以根据源文件进行调试了？」...在 rollup 源码目录，通过 npm run watch 进行构建，此时会生成带有 source-map 的构建文件。
path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'development', // 配置source-map...类型 devtool: 'source-map' };
建议 若需要在 发布环境（线上、qa测试环境、预发环境等） 调试应用，建议直接启用最完整版 source-map，此版本构建 速度最慢，但是包含的信息最完整，包含了源码、行、列等信息。...devtool: false, // source-map | eval-source-map | ......如果我们使用了 source-map 模式，不可避免的会被极慢的构建速度所困扰，但是想要得到更多的信息就只能让它做更多的活，做更多的活当然需要耗费更多的时间。...不用插件直接devtool: 'source-map'也没有问题。 所以有理由相信，这是 umijs + SourceMapDevToolPlugin 组合之后产生的的一个 bug。...'source-map' : false, // 无论是否build sourcemap，都加载此插件，在插件内部判断。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
