webpack中sourcemap的使用

source-map是什么

简单说，Source map就是以.map结尾的，里面维护了代码打包前后映射关系的一个文件。

source-map有什么作用

我们代码运行在浏览器上时，是经过压缩丑化的，当代码报错时，调试起来非常困难。比如下面这个例子

const message = "hello webpack";
console.log(message);
console.log(age); // 没有申明age变量，所以这行代码肯定报错

使用webpack打包后，打开浏览器的效果：

点击报错文件之后：

这根本没有办法找到具体的位置，这个时候source-map的作用就体现出来了。

修改webpack里面的配置：

重新打包，浏览器控制台的报错会表明具体的位置信息：

source-map作用是帮助定位到报错代码的原始位置。

浏览器启用source-map

谷歌浏览器是默认打开了source-map的，如果没有按照下面方式手动开启：

source-map的工作原理

打开build/bundle.js文件，尾部有这么一行注释

浏览器可以根据这一行注释中，sourceMappingURL找到对应的文件。

分析source-map文件

• version: 当前使用的版本，目前是第3版；
• file：打包后的文件（浏览器加载的文件）
• sources：从哪些文件转换过来的source-map和打包的代码（最初始的文件）
• names：转换前的变量和属性名称
• mappings：source-map用来和源文件映射的信息（比如位置信息等），一串VLQ编码
• sourcesContent：转换前的具体代码信息
• sourceRoot：所有sources相对的根目录

生成source-map

devtool控制是否生成，以及如何生成source-map。webpack提供了非常多的选项来生成source-map，选择不同的值，生成的source-map会明显影响到构建和重新构建的速度。

• false：不使用source-map。

• none：生产模式下的默认值，不生成source-map文件

• eval： 开发模式下的默认值，不生产source-map文件

  • 它会在eval执行的代码中，添加// #sourceURL=;
  • 它会在浏览器调式面板中生成对应的文件目录，方便我们调试代码。

eval值

source-map值

生成一个独立的source-map文件，并且在bundle文件中有一个注释执行source-map文件。

eval-source-map值

不会生成独立的文件，source-map是以data URL形式添加到eval函数的后面

inline-source-map值

不会生成独立的文件，但是source-map会以data URL形式添加到bundle文件的后面

cheap-source-map值

会生成source-map文件，但是会更加高效一些（cheap低开销），因为没有生成列映射。在开发中我们一般只需要行信息就可以定位到错误了。

cheap-module-source-map值

类似于cheap-source-map，但是对源自loader的source-map处理会更好。

nosources-source-map值

会生成source-map，但是只有错误信息的提示，不会生成源代码文件；

还有很多值这里就不一一列举了，可以查看webpack文档，并调试。

www.webpackjs.com/configurati…

总结

开发环境更需要方便调试，推荐使用：

source-map或者cheap-module-source-map

生产环境需要隐藏源代码，推荐使用：

nosources-source-map、false或者不写