webpack06------sourceMap用法

介绍

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'
  }