!webpack5发生重大变化

提供源代码映射到构建代码的一种技术

webpack开启

  1. devtool:'source-map'

配置规则

Inline | hidden | eval | nosource | cheap | module | source-map

source-map 26个配置规则

层数 属性
第一层 inline hidden eval
第二层 nosources
第二层 cheap cheap-module
第四层 source-map

规则含义

  1. // source-map 错误原因，错误位置
  2. // Inline-source-map  内联  只生成一个source-map，和source-map基本类似，只是内联
  3. // hideen-source-map  外部  能提示错误，但是不能定位到源代码
  4. // eval-source-map    内联  每一个文件都声称一个eval内的source-map
  5. // nosources-source-map  外部
  6. // cheap-source-map  外部
  7. // cheap-module-source-map 外部
key名 含义
cheap 不包含列信息（关于列信息的解释下面会有详细介绍)也不包含 loader 的 sourcemap
Inline 将.map 作为 DataURI 嵌入，不单独生成.map 文件
eval 使用 eval 包裹模块代码
nosources 能找到错误代码的准确信息，但是没有任何源代码信息（隐藏源代码）
module 包含 loader 的 sourcemap（比如 jsx to js ，babel 的 sourcemap）,否则无法定义源文件
source-map 产生.map 文件
hideen 提示到错误代码的错误原因，但是没有错误位置，不能追踪到源代码的错误，只能提示构建后代码（隐藏源代码）（就是删除了最后的sourcemapingUrl映射)

组合作用

key名 特点 解决问题 存在问题
cheap 错误信息只会定义到行，而不会定义到列 精准度降低换取文件内容的缩小
1. 错误信息只会定义到行，而不会定义到列
1. 对于经由 babel 之类工具转义的代码，只能定位到转换后的代码
Inline 将 map 作为 DataURI 嵌入，不单独生成.map 文件 减少文件数
eval 用``eval 包裹源代码进行执行 利用字符串可缓存从而提效,加 eval 和不加是一样的🐂，但加了eval后可以缓存，于是更🐂
nosources 能找到错误代码的准确信息，但是没有任何源代码信息（隐藏源代码）
module 会保留 loader 处理前后的文件信息映射
source-map 定位信息最全，但也.map 文件最大，效率最低 解决对于使用``cheap 配置项导致无法定位到 loader 处理前的源代码问题
hideen 提示到错误代码的错误原因，但是没有错误位置，不能追踪到源代码的错误，只能提示构建后代码（隐藏源代码）（就是删除了最后的sourcemapingUrl映射)

调试更友好

  1.  cheap-module-source-map

速度快

  1. eval-cheap-source-map
  2. eval-source-map

开发环境

  1. eval-cheap-module-source-map // 提示比较全，速度相对较快 
  2. eval-source-map //提示最全，相对较快 （vue,react）

生产环境

  • 一般情况下，我们并不希望任何人都可以在浏览器直接看到我们未编译的源码，
  • 所以我们不应该直接提供 sourceMap 给浏览器。但我们又需要 sourceMap 来定位我们的错误信息，
  • 一方面 webpack 会生成 sourcemap 文件以提供给错误收集工具比如 sentry，另一方面又不会为 bundle 添加引用注释，以避免浏览器使用。
  1. cheap-module-source-map // 提示效果会更好
  2. source-map
  3. hidden-source-map