这一章节的代码位于 06_advance_config/6_2_source_map

  • 生产模式下, 被转译, 打包, 压缩后的代码如果出错, 不方便进行调试, 如下
  • image.png
  • 于是希望有个映射文件可以映射源码, 方便调试, 当然点击压缩代码左下角的 {} 按钮也能格式化代码勉强调试
  • image.png

devtool配置

在webpack中开始配置devtool参数来进行源码映射配置

  • source-map 会单独生成一个sourcemap文件, 出错会表示当前报错的列和行
  • image.png

  • image.png

  • eval-source-map 不会产生单独文件, 集成在打包后文件中, 可以显示行列 image.png

  • cheap-module-source-map 生成单独文件, 不会产生列image.png

  • image.png

  • cheap-module-eval-source-map 不会产生文件, 集成在打包后文件中, 不会产生列image.png