source-map配置
source-map配置
- source-map
- webpack.config.js中配置
- 总结
source-map
概念：构建源代码和打包后代码映射关系的一种技术
作用：追踪源代码方便调试
webpack.config.js中配置
module.exports = {
dev-tool: 'source-map'
}| 配置 | 内联or外联 | 特点 |
|---|---|---|
| soure-map | 外部 | 错误代码准确信息和源代码的错误位置 |
| inline-source-map | 内联 | 错误代码准确信息和源代码的错误位置 |
| hidden-source-map | 外部 | 错误代码错误原因但是没有错误位置，不能追踪错误源代码 只能提示到构建后代码的错误位置 |
| eval-source-map | 内联 | 每一个文件都生成对应的source-map，同样能查看错误代码准确信息和源代码的错误位置 |
| nosources-source-map | 外部 | 有错误信息但是没有源代码 |
| cheap-source-map | 外部 | 错误只精确到行不能精确到列 |
| cheap-module-source-map | 外部 | 错误代码准确信息和源代码的错误位置 module会将loader的source map加入 |
- 内联和外部的区别：1外部生成文件，内联没有。2内联构建速度更快。
- 开发环境：
-速度快（eval>inline>cheap>…）更快的组合一下eval和cheap
即eval-cheap-source-map>eval-source-map（vue-cli默认配置）
-调试更友好 source-map 或者cheap-module-source-map 或者cheap-source-map - 生产环境：
-考虑源代码要不要隐藏？调试要不要更友好？内联会让代码体积变大，所以生产环境不用内联
nosources-source-map:全部隐藏
hidden-source-map:只隐藏源代码，会提示构建后代码错误信息
常用source-maph/cheap-module-source-map
总结
常用
生产：eval-source-map
开发：source-map
source-map配置相关推荐
- 【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
- webpack5 基础配置（4下）模块化原理 初识source map
3 commonjs引用esmodule 前面我们讲了webpack实现模块化得原理,分别是commonjs esmodule,现在讲一下commonjs引用esmodue.先看例子 esmodule ...
- webpack：devtool配置中的source map
webpack:devtool配置中的source map 一.功能作用 二.配置文件 三.source map格式 (1)source-map (2)inline-source-map (3)hid ...
- 你知道source map如何帮你定位源码么？
大家好,我是若川.今天分享一篇我们经常会忽略的定位原始代码位置原理的文章.文章不长,例子不错,可以先收藏,有空时动手试试. 学习源码系列.年度总结.JS基础系列 前言 我们知道,代码上线前要经过压缩, ...
- Source Map调试压缩后代码
在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...
- 微信开发者工具 Source Map 的使用
在小程序后台 ->开发管理 ->运维中心 -> 错误日志 中可以看到小程序运行中的报错信息,但是代码都是压缩混淆的,那就需要如何去定位,下面说明说如使用微信开发者工具 Source ...
- 一文看懂 webpack 的所有 source map ！
一直以来对source map 都懵懵懂懂, 被webpack 所提供的多样的source 给乱花了眼. 这次就决定来一一尝试一下各种source map的区别 什么是source map 现代的前端 ...
- release 与您的 deploy integrations 或 source map uploads 同步
SDK 将事件发送到哪里.如果没有提供这个值,SDK 将尝试从 SENTRY_DSN 环境变量中读取它.如果这个变量也不存在,SDK 就不会发送任何事件. 在没有进程环境(如浏览器)的运行时中,fal ...
- webpack与Source Map
前端工程化 安装webpack npm install webpack webpack-cli -D 移动app MUI框架 添加购物车等——混合式开发（四）...