webpack中devtool的配置方案[开发模式]---[线上模式]

// 开发模式下
module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map'
}
// 线上模式下
module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map'
}

权威介绍请查看官方文档：https://webpack.js.org/configuration/devtool/

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'source-map'

能提示错误在源文件的具体位置。打包后会在output配置的路径[比如说dist目录]下，

生成一个`源文件`和`打包后的文件`的映射关系文件[xxx.map.js]。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'inline-source-map'

功能和source-map一样，不会生成映射关系文件，而是将映射关系写到了出口文件中[比如说main.js]

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'cheap-source-map'

没有加cheap时，会提示哪一行的哪一列发生了错误[二维坐标（x,y）];

加了cheap后提示哪一行发生了错误[一维坐标 （x）]。如果引入的第三方模块发生错误，此时也不会提示。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'cheap-module-source-map'

会同时提示业务文件和第三方文件发生的错误

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

devtool: 'eval'

能对一些简单的错误，快速的做出提示。但是对一些复杂的错误，给出的提示信息很模糊。