likes
comments
collection
share

Webpack配置-source-map

作者站长头像
站长
· 阅读数 13

  • 初识source-map

    一般我们打包发到服务器的代码都是被压缩丑化之后的，有些项目配置了一下浏览器兼容的插件之后，会将es6的代码转换成 es5,这样我们在开发调试的时候如果是部署到测试服的项目出问题了就没办法很好的定位到问题在哪里如下图： Webpack配置-source-map source-map作用就在于能够帮你定位到错误的代码在那个文件哪一行，如果项目中配置了一些将 es6写代码转换成 es5代码的插件source-map也能够将已转换的代码映射到原始的文件使浏览器可以重构原始源并在调试器中显示重建的原始源；效果如下： Webpack配置-source-map

  • 使用source-map

    在 webpack配置中添加 devtool具体配置下文中有详细说明如下图: Webpack配置-source-map,如果配置的内容就是 source-map则会根据源文件生成对应的 source-map文件并且在打包后的代码最后一行会有个注释它会指向对应的 source-map如下图: Webpack配置-source-map 同时在 Chrome的设置中也要添加如下两项（默认是被勾选的）： Webpack配置-source-map

  • devtool配置

    上文说到使用 source-map用 devtool配置，以下是一些配置的选项
    • 不会生成source-map的几种配置
      • false：不使用 source-map
      • （none）生产环境推荐使用:不写devtool配置，mode是 production的情况下默认就是(none)
      • eval：mode是 develpment的情况下默认值，不会生成 source-map文件，它会在 eval执行的代码中添加 //# sourceURL=注释，同时调试也能定位到代码位置： Webpack配置-source-map 也能定位到错误的位置： Webpack配置-source-map
    • source-map
      生成对应的source-map文件并且会在打包后的代码最后一行添加一个注释//#sourceMappingURL=build.js.map Webpack配置-source-map
    • eval-source-map
      会生成source-map，但是不会新生成一个文件，会以DataUrl添加到eval函数的后面如下图： Webpack配置-source-map
    • cheap-source-map
      和source-map一样会生成一个source-map文件并且打包的文件最后一行会添加一行注释指向对应source-map文件，但是在浏览器错误提醒上面cheap-source-map只能提示到行，不能精确到对应的列如下图: Webpack配置-source-map
    • inline-source-map
      不会生成source-map文件但是对应的source-map会在打包文件的后面是以DataUrl添加到bundle文件的后面如下图:

Webpack配置-source-map

  • nosources-source-map
    会生成sourcemap，但是生成的sourcemap只有错误信息的提示，不会生成源代码文件； 如下图： Webpack配置-source-map
  • hidden-source-map
    会生成sourcemap，同时也会生成对应的文件，但是不会再打包文件的最后一行添加注释，所以想使用source-map需要自己添加注释如下图: Webpack配置-source-map
  • cheap-module-source-map（开发模式下推荐使用）
    如果一些项目使用了一些 loader如 babel-loader对源代码进行了一些处理此事我们仅仅使用cheap-source-map在调试效果如下: Webpack配置-source-map源代码这行错误是在第五行但此时报错是在第四行，原因就在于 babel对源代码进行了一些转换处理所以代码会和原代码有些不同。但是如果使用cheap-module-source-map效果如下: Webpack配置-source-map发现能精确的定位到代码的行，所以开发模式下推荐使用这种配置方式
  • 多值组合
    组合规则：
    • inline-|hidden-|eval：三个值时三选一；
    • nosources：可选值
    • cheap可选值，并且可以跟随module的值
    组合方程式如下：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  • 各种source-map性能：

    Webpack配置-source-map
转载自:https://juejin.cn/post/6995743236941692936
评论
请登录