03-sourceMap -源代码与打包后代码的映射关系
应用场景:在开发中我们哪里出错了,可以帮助我们快速的定位到哪里出错了。
在webapck.config.js配置文件中,如果mode是development开发模式的话,是默认开启(就是不写devtool),是但定位的错误行数没那么准确。
设置devtool:"source-map",即可捕获到错误,并且这个错误是源代码第几行的错误,如果devtool:'none',虽然也会报错,但是报的是打包后的js文件哪一行错了,这肯定不是我们想要的。
我们在入口文件12行故意写错:
在配置中mode为开发模式,且开启映射
在页面中就能捕获到源码中错误位置
devtool的介绍:https://webpack.js.org/configuration/devtool#devtool
还有其他的值可以设置,+代表速度,+号越多代表速度越快,-号代码速度慢,当然速度也就对应性能。
eval:速度最快,使用eval包裹模块代码,不会生成.map文件
source-map: 产生.map
文件
cheap:较快,不用管列的信息,也不包含loader的sourcemap
Module:第三方模块,包含loader的sourcemap(比如jsx to js ,babel的sourcemap)
inline: 将.map
作为DataURI嵌入打包后文件中,不单独生成.map
文件
配置推荐:
devtool:"cheap-module-eval-source-map"
,// 开发环境配置
devtool:"cheap-module-source-map",
// 线上生成配置