webpack source map

使用 source map 来帮助你进行本地开发，算是前端开发利器之一了

使用 source map

作用:通过

source map 定位到源代码

​ · source map科普⽂文:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

开发环境开启，线上环境关闭

​ · 线上排查问题的时候可以将 sourcemap 上传到错误监控系统

​ · 防止业务代码逻辑暴露出来

• eval: 使⽤用eval包裹模块代码

  打包的时候用 eval 把代码包裹起来，这个时候会有一个 url 来指定 source-map 的信息

• source map: 产⽣生.map⽂文件

  source map 与 打包出来的文件是分离的

• cheap: 不不包含列信息

  有的时候报错了，会具体报错到哪一行哪一列，决定这个显示还是不显示,用了 cheap，就不显示这个信息

• inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件

  打包的时候会把 source map 内联到 js 文件里面,出错的时候可以进一步定位

• module:包含loader的sourcemap

source map 类型

devtool	首次构建	二次构建	是否适合生产环境	可以定位的代码
(none)	+++	+++	yes	最终输出的代码
eval	+++	+++	no	webpack 生成的代码（一个个的模块）
cheap-eval-source-map	+	++	no	经过 loader 转换后的代码（只能看到行）
cheap-module-eval-source-map	0	++	no	源代码（只能看到行）
eval-source-map	-	+	no	源代码
cheap-source-map	+	0	yes	经过 loader 转换后的代码（只能看到行）
cheap-module-source-map	0	-	yes	源代码（只能看到行）
inline-cheap-source-map	0	-	no	源代码（只看到行）
source-map	-	-	yes	源代码
inline-source-map	-	-	no	源代码
hidden-source-map	-	-	yes	源代码

module.exports = {
  entry: ...,
  outpu: ...,
  plugins: ....,
  devServer: {
    contentBase: './dist',
    hot: true,
    stats: 'errors-only'
  },
  devtool: 'cheap-source-map'
}