webpack--sourceMap

配置devtool  此选项控制是否生成，以及如何生成 source map。

当页面代码出现错误的时候  

 

我们通常会点击右侧 看看代码哪里出错了  

 

这是打包后 main.js内的代码  我们希望代码写错的时候 告诉我们的是源代码哪里出了问题

总结一下： 

SourceMap是一种映射关系。当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。

const path = require('path');

module.exports = {
  devtool: 'none', // SourceMap
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

参数

1.source-map

会生成map格式的文件，里面包含映射关系的代码

devtool: 'source-map',

2.inline-source-map

不会生成map格式的文件，包含映射关系的代码会放在打包后生成的代码中

devtool: 'inline-source-map',

使用 inline-source-map的时候  map文件就会变成一个很长的base64的字符串 被放在main.js的底部  和source-map的区别是  直接将 map文件 打包到了 main.js文件内

  使用inline-source-map  当你的代码出错的时候 会告诉你 你的代码在第几行的第几个字符出了问题  会精确到哪一行 那一列出了问题  实际上来说   代码量比较大时  这样的映射比较耗费性能  代码出错 只希望告诉我们哪一行出错就ok了  

3.cheap-inline-source-map

cheap有两种作用：一是将错误只定位到行，不定位到列。二是映射业务代码，不映射loader和第三方库等。会提升打包构建的速度。

devtool: 'cheap-inline-source-map',

4.cheap-moudle-inline-source-map

业务代码、loader和第三方库的代码都会进行映射

devtool: 'cheap-moudle-inline-source-map',

5.eval

打包速度最快的一种方式  针对于比较复杂的代码时  eval 提示出来的内容可能并不是很全面

devtool: 'eval',

最佳实践：

开发环境的时候  使用 

devtool: 'cheap-module-eval-source-map',

提示出来的错误是比较全的   打包速度是比较快的

 

生产环境：

devtool: 'cheap-module-source-map',