深入浅出webpack之source-map

___2
121 阅读3分钟

source-map

  • 我们通常运行在浏览器地代码，都是通过打包压缩的，这样就会导致线上代码和我们本地代码转换后不一致。报错信息不方便排查等。然后我们就可以使用source-map来解决
  • source-map是从已转换的代码，映射到原始地源文件
  • 使浏览器可以重构原始源并在调试器中显示重建的原始源

使用source-map

module.exports = {
    devtool:"source-map"
}

image.png

分析source-map文件

  • version当前使用的版本，也就是最新的第三版；
  • sources从哪些文件转换过来的source-map和打包的代码（最初始的文件）；
  • names转换前的变量和属性名称（development模式不会转换，production模式会进行转换）
  • mappingssource-map用来和源文件映射的信息（比如位置信息等），一串base64 VLQ（veriable length quantity可变长度值）编码；
  • file打包后的文件（浏览器加载的文件）；
  • sourceContent转换前的具体代码信息（和sources是对应的关系）；
  • sourceRoot所有的sources相对的根目录；

source-map设置项解析

  • devtool:false

    不使用source-map，不会生成任何和source-map相关的内容，也不生成eval

  • devtool:'none'

    在production模式下的默认值，不会生成source-map，只需要设置production模式，不需要再单独设置为none

  • devtool:'eval'

    在development模式下的默认值，不会生成source-map，最终打包的js文件中会生成eval函数，用来在浏览器中转换成对应的js文件，方便我们查找对应报错信息和排查

    image.png

  • devtool:'source-map'

    把所有用到的js文件全部都会生成source-map，包含webpack，引入的npm包，自己写的js等

  • devtool:'eval-source-map'

    会生成source-map，但不会生成单独地sourcemap文件。是以eval函数包裹的DataUrl形式的source-map

    image.png

  • devtool:'inline-source-map'

    会生成source-map，但不会生成单独地sourcemap文件。生成一个DataUrl形式的sourcemap文件

    image.png

  • devtool:'cheap-source-map'

    会生成source-map，只保存代码所在的行数，不生成列信息。可以减少sourcemap的文件大小

    image.png

  • devtool:'cheap-module-source-map'（推荐）

    生成一个没有列信息的sourcemap文件，如果文件被一些loader转换后可能代码结构发生变化，这样就导致报错信息也会变的不准确，解决这个问题就可以使用cheap-module-source-map

  • devtool:'nosources-source-map'（推荐）

    会生成sourcemap文件，但是只有错误提示到文件报错位置，不会生成对应js文件在浏览器中直接调试，只能去代码中查找

  • 多个值的组合

    • inline-|hidden-|eval- :三个值时三选一
    • nosources : 可选值
    • cheap可选值,并且可以跟随module的值
    • [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  • 开发最佳实践

    • 开发阶段: 推荐使用source-map或者cheap-module-source-map
    • 测试阶段: 推荐使用source-map或者cheap-module-source-map
    • 发布阶段: false、(none)

示例代码

    https://gitee.com/weiLZ598/webpack-study.git
avatar
文章
阅读
粉丝