webpack sourcemap的使用以及区别

webpack sourcemap是一种能够提供打包后代码错误位置的技术，有了这项技术我们能够知道代码错误的具体位置

使用方法

在webpack.config.js中配置即可

devtool:'source-map'

有几种不同的配置项

source-map：

外联

会生成一个外部的sourcemap文件，同时会提示代码出错的源文件

inline-source-map

内联

会在打包好的入口js内生成一个sourcemap字符串

出错提示也是标明了错误的源文件

webpack-source-map

外联

会生成一个外部的sourcemap文件

但是错误提示没有标明源文件而是指向了打包后的js文件

eval-source-map

内联

在打包好的js文件内生成一个内联的sourcemap字符串

标明了错误的源文件

nosource-source-map

外联
会生成单独的sourcemap文件

报错提示源文件，但是没有源代码信息

cheap-source-map

外联

报错提示源文件，但是只能精确到行，不能精确到具体出错的是哪一个字

内联和外联的区别

外联会生成外部文件，内联不会生成外部文件。内联的打包速度比外联快， 但是内联会使得代码体积非常大，所以生产环境下一般不使用内联
速度eval>inline>cheap ，速度最快的是eval-cheap-source-map