介绍
Source map
就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
简单的说 Source map
是一种映射关系,是对打包后错误信息映射到具体的开发文件中去,便于定位错误位置。
devtool配置5个关键字说明
Source map
是通过webpack
里面的 devtool
来配置的,具体的配置参数有如下几种:
- eval: 使用eval包裹模块代码
- source-map: 产生.map文件
- cheap:不包含列信息,也不包含loader的sourcemap
- module: 包含loader的sourcemap(比如jsx to js ,babel的sourcemap)
- inline:将.map作为DataURI嵌入,不单独生成.map文件。
推荐配置如下
development模式:cheap-module-eval-source-map
production模式:cheap-module-source-map
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map'
mode: 'production',
devtool: 'cheap-module-source-map'
}